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的开发做了很多,但是对于你的特定情况,你想把"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)，你也可以使用其他事件。

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