Jquery：附加后单击事件不起作用。（不知道怎么用.ON）

Jquery: Click event doesn't work after append. (Don't know how to use .ON)

提问by user2669261

I have 2 click events. One appends an IMG which includes another click event. It doesn't work obviously. I know that I have to use jQuery's .ON, but I just can't figure out how and where.

我有 2 个点击事件。一个附加一个 IMG，其中包括另一个点击事件。它显然不起作用。我知道我必须使用 jQuery 的 .ON，但我不知道如何以及在哪里。

My code:

我的代码：

$( document ).ready(function() {
    // The one below (.choimh) isn't triggered anymore
    $('.choimg').click(function(){

    });

    // Switch to chosen color
    $('.color').click(function(){
        $(".thumbs").append('<a href="#"><img id="image'+u+'" class="choimg" src="/img/products/mini/'+colnumber+'-'+ i + '.jpg" />');
    });
});

The .color div is on a completely different place than .choimg.

.color div 与 .choimg 位于完全不同的位置。

I just can't figure out how to use .ON.

我就是不知道如何使用 .ON。

回答by Phillip Schmidt

It used to be the liveor delegatefunctions that did this kind of thing. Now you can do it like this:

它曾经是做这种事情的liveordelegate函数。现在你可以这样做：

$(document).on('click', '.choimg', function(e) {

//do whatever

});

回答by JasCav

jQuery's ondoes a lot, but for your specific case, you want to put "on" onto a DOM object that is not loaded up after the DOM has loaded. This allows the event to bubble up to this DOM object which, then, in turn, delegates the event to the appropriate DOM item based on the second selector your provide.

jQuery 的 on做了很多，但对于您的特定情况，您希望将“on”放到 DOM 加载后未加载的 DOM 对象上。这允许事件冒泡到此 DOM 对象，然后根据您提供的第二个选择器将事件委托给适当的 DOM 项。

If you follow the link above, there is a ton of information about it in the jQuery documentation. Specifically, this is important for your case...

如果你点击上面的链接，jQuery 文档中有大量关于它的信息。具体来说，这对您的情况很重要...

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next.

事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。为确保元素存在且可以被选择，请在文档就绪处理程序中为页面上 HTML 标记中的元素执行事件绑定。如果将新 HTML 注入页面，则在将新 HTML 放入页面后选择元素并附加事件处理程序。或者，使用委托事件附加事件处理程序，如下所述。

In any case, you need to bind to the thing that already exists, and provide a second selector for the thing that is going to be added that you want to have the actual event, along with the event, and the functionality. Something like this...

在任何情况下，您都需要绑定到已经存在的事物，并为要添加的事物提供第二个选择器，您希望拥有实际事件、事件和功能。像这样的东西...

$('#selector-to-thing-that-exists').on('click', '.thing-that-will-be-added-later', function() {
  alert('Do stuff here!');
});

Note that it is important that the "thing that exists" is as low as you can possibly get it in the DOM for efficiency. For example, it is not preferable to put the selector on the 'body' or at the document level. Keep this in mind.

请注意，重要的是“存在的东西”尽可能低，以提高效率。例如，最好不要将选择器放在“正文”或文档级别。记住这一点。

Hopefully this gives a bit of a better understanding for what you want to do. I highlyencourage you to read the jQuery documentation as it is very good.

希望这能让你更好地理解你想要做什么。我强烈建议您阅读 jQuery 文档，因为它非常好。

回答by Mateusz

You should use something like:

你应该使用类似的东西：

$(document).on("click", ".color", function() {
//append code here
});

General prototype is on(eventType, selector, function), you can use other events too.

一般原型是on(eventType, selector, function)，你也可以使用其他事件。

For more info see this.

有关更多信息，请参阅此。