Jquery：在附加元素后点击事件不起作用。（不知道如何使用.ON）

Question

我有两个点击事件。其中一个会附加一个包含另一个点击事件的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。

- user2669261

---

这个能帮到你吗？链接 - Mateusz

将 .on() 放在已经存在于 DOM 中的父元素上，但是你也可以使用 document 或 body。 - Dom

Answer 1

以前是通过 live 或者 delegate 函数来做这种事情。现在可以这样做：

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

//do whatever

});

- Phillip Schmidt

---

最好使用包含“choimg”的元素，而不是“document”。 - acarayol

谢谢！花了很多时间寻找答案！ - Javier Pintor

Answer 2

jQuery的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中尽可能将“存在的东西”放置得越低效率就会越高。例如，将选择器放在“body”或文档级别上并不理想。请记住这一点。

希望这可以更好地理解你想要做什么。我强烈鼓励您阅读jQuery文档，因为它非常好。

- JasCav

---

谢谢，"thing that exist" 是我漏掉的部分。 - Sloy

Answer 3

你应该使用类似以下的语句：

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

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

更多信息请参见此处。

- Mateusz