Question

我正在使用Jquery 2.1.0。我已将一些元素（包含label）注入到div元素中。我使用以下JavaScript来处理所有标签上的点击事件，但它完全死了，没有响应。我检查了Jquery已加载。

$('label').on("click", function () {
    var ul = $(this).parent().children("ul:first");
    if (ul.is(':visible')) {
        ul.css({ "display": "none" });
    }
    else {
       ul.css({ "display": "block" });
    }
});

我在IE 10中使用了开发人员工具并调试了代码。当我点击F5时，它会转到我的断点（在我的代码的第一行）但是当我点击label时没有任何反应并且没有错误。

Answer 1

这只会将事件处理程序分配给最初存在于页面上的label元素：

$('label').on("click", function () {
  // ...
});

要捕获稍后添加的元素，您需要将事件处理程序分配给公共父元素（在页面生命周期内不添加/删除）并过滤源元素，如下所示： / p>

$(document).on('click', 'label', function () {
  // ...
});

请注意，两个选择器：

document
'label'

第一个，即事件处理程序的目标，只在页面加载时（或者在评估此行代码时，通常在页面加载时）一次评估。这会将处理程序附加到document对象。因为所有事件都会冒泡＃34;对于父元素，这将捕获页面上的所有点击事件（除非传播明确停止，当然）。

第二个，即＆＃34;过滤器＆＃34;对于.on()方法的处理程序，在此处理程序捕获事件时评估。它过滤掉了发起click事件的元素，以便只对那些与过滤器匹配的处理程序执行处理程序。

我实际上recently blogged关于这个主题。

Answer 2

您需要使用 event delegation ，因为您的标签是动态创建的元素：

事件委托允许我们将单个事件监听器附加到父元素，将为匹配选择器的所有子项触发，这些孩子现在是否存在，或将来是否存在。

$('body').on('click','label', function() {
    // Your code here
});

基本上，事件委派会帮助您将click事件附加到您案例中新添加的label元素

Answer 3

你应该使用event delegation

$(document).on("click","label",function(){

});

事件委托允许您将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有子项触发，无论这些子项现在是存在还是将来添加。

Answer 4

从这个答案到另一个问题：https://stackoverflow.com/a/8337382/2407870

似乎该方法不适用于Chrome中的某些内联元素。如果您的元素是内联的，请尝试将显示更改为阻止。

JQuery .on方法没有响应

4 个答案: