javascript - .on在处理附加节点时出现问题

我有这段代码可以监控<div class="selectable_item">上的点击

$(function(){
  $("#matchres .selectable_item").on("click", function(){
    console.log('Sending request')
    $.post("/request", $.param({'crit_id': this.id}), function(){}).fail(function(){console.log("matchres error...");});
    return true;});
});

我要注意的是，例如，当我使用chrome控制台时，看看是否有找到它的$("#matchres .selectable_item");，并且如果我在控制台$("#matchres .selectable_item").on("click", function(){console.log('hi')});中定义了操作，则按预期进行，并且控制台正确记录。但是我上面给你看的东西行不通。有什么想法吗？任何帮助将不胜感激。作为补充信息，我正在使用jquery v1.10.2。

最佳答案

@Hanlet的想法是正确的，在文档加载时，这些项不存在，因为您正在动态创建它们，而当您在开发人员控制台中与它们交互时，它们确实存在。您要做的是将事件处理程序绑定到委托或将侦听子元素上的事件的对象。

您不想做的是在可以避免的情况下将委托回调添加到文档中。对文档的任何单击都必须检查其事件目标，以查看是否应触发此文档委托回调。您执行了足够的次数，这将成为性能问题。而是选择不是动态创建的最接近的祖先元素。

例如，如果要动态创建.selectable_item而不是#matchres，则添加以下内容：

$('#matchres').on('click', '.selectable_item', function () { ... });