Jquery：附加后单击事件不起作用。（不知道如何使用.ON）答案

【问题标题】：Jquery: Click event doesn't work after append. (Don't know how to use .ON)Jquery：附加后单击事件不起作用。（不知道如何使用.ON）
【发布时间】：2013-08-14 07:22:31
【问题描述】：

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

我的代码：

$( 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" />');
    });
});

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

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

【问题讨论】：

可以this帮忙吗？
将.on()放在已经存在于DOM中的现有父元素上，但是，您也可以使用document或body

标签： jquery append

【解决方案1】：

以前是 live 或 delegate 函数做这种事情。现在你可以这样做了：

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

//do whatever

});

【讨论】：

代替“document”，最好放一个包含“choimg”的元素：
谢谢！花了很多时间寻找答案！

【解决方案2】：

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

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

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

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

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

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

希望这能让您更好地了解您想要做什么。我高度鼓励您阅读 jQuery 文档，因为它非常好。

【讨论】：

谢谢，“存在的东西”是我所缺少的。

【解决方案3】：

你应该使用类似的东西：

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

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

欲了解更多信息，请参阅this。

【讨论】：