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

Question

我有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。

Answer 1

以前是执行此类操作的live或delegate函数。现在你可以这样做：

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

//do whatever

});

Answer 2

jQuery's on做了很多，但是对于你的具体情况，你想把“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!');
});

请注意，“存在的东西”必须尽可能低，以便在DOM中获得效率。例如，将选择器放在“主体”或文档级别是不可取的。记住这一点。

希望这能让您更好地理解自己想要做的事情。我高度鼓励您阅读jQuery文档，因为它非常好。

Answer 3

你应该使用类似的东西：

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

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

有关详细信息，请参阅this。