Question

我有一些代码可以监控<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。

Answer 1

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

您想要做的是在可避免的情况下向文档添加委托回调。任何对文档的单击都必须检查其事件目标，以查看它是否应该触发此文档委托回调。你做了这么多次，它成为一个性能问题。相反，选择最近的非动态创建的祖先元素。

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

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

Answer 2

因为您动态添加这些，这可能是一个事件委派问题，非常常见。试试这个：

$(document).on("click", "#matchres .selectable_item", function(){ ... }

问题主要在于，在首次构建DOM时绑定它们，然后动态添加更多元素，但事件未绑定到这些新元素。

看看这两个例子：

http://jsfiddle.net/hescano/aKfWf/

和

http://jsfiddle.net/hescano/aKfWf/1/

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

2 个答案: