JQuery .on方法没有响应

JQuery .on method not responding

本文关键字：响应 方法 on JQuery      更新时间：2023-09-26

我使用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没有发生，没有错误。

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

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

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

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

注意有两个选择器:

  • document
  • 'label'
第一个

是事件处理程序的目标，它只在页面加载时(或者在计算这行代码时，通常是在页面加载时)对求值一次。这将处理程序附加到document对象。由于所有事件"冒泡"到父元素，这将捕获页面上所有单击事件(当然，除非明确停止传播)。

第二个是.on()方法处理程序的"过滤器"，在该处理程序捕获事件时对其求值。它过滤掉引起click事件的元素，这样处理程序只对那些匹配过滤器的元素执行。

我最近写了一篇关于这个话题的博文

你需要使用事件委托因为你的标签是动态创建的元素:

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

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

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

应该使用事件委托

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

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

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

似乎该方法不适用于Chrome中的一些内联元素。如果你的元素是内联的，试着把显示改成block。

相关文章：