JQuery .on方法没有响应[重复]答案

【问题标题】：JQuery .on method not responding [duplicate]JQuery .on方法没有响应[重复]
【发布时间】：2014-03-14 13:24:13
【问题描述】：

我正在使用 Jquery 2.1.0。我已将一些元素注入到 DOM（包含 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 时，什么也没有发生，也没有错误。

【问题讨论】：

learn.jquery.com/events/event-delegation
如果没有事件委托，您只能将处理程序附加到已注入的元素（正如上面的人指出的那样）另外，使用 .show() 和 .hide()

标签： javascript jquery html click

【解决方案1】：

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

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

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

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

注意有两个选择器：

document
'label'

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

第二个是.on() 方法的处理程序的“过滤器”，每当此处理程序捕获到一个事件时都会对其进行评估。它过滤掉发起 click 事件的元素，以便仅对匹配过滤器的元素执行处理程序。

我实际上已经recently blogged 讨论过这个主题。

【讨论】：

【解决方案2】：

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

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

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

基本上，事件委托将帮助您将点击事件附加到您的案例中新添加的label 元素

【讨论】：

【解决方案3】：

您应该为此使用event delegation

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

});

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

【讨论】：

【解决方案4】：

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

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

【讨论】：