Question

jQuery .on()有一个可选的选择器，如下所示：

$("foo").on(events, ["selector"], handler)

此代码在DOM中找到“foo”并使用“selector”过滤其后代，然后将事件绑定到过滤后的结果。

我认为上面的代码与没有可选选择器

的代码完全相同

 $("foo selector").on(events, handler)

此代码在DOM中找到“foo”，然后在“foo”的后代中找到“selector”（结果与上面的代码相同）。

真实的例子：

$(".class1").on("click" , ".class2", function(){});

和

$(".class1 .class2").on("click" , function(){});

我的问题是上述代码之间有什么区别？

如果没有任何差异，为什么jquery有这个选项（它是多余的）？

Answer 1

首先应了解jQuery .bind()和.delegate()的工作原理，以了解.on()中的可选参数。

$("#element").bind("click", clickFn)将事件监听器附加到#element，而$("body").delegate("#element", "click", clickFn)将事件处理程序附加到正文，并检查事件是否来自#element，如果发生，clickFn 1}}被执行，否则被忽略。

$("#element").bind("click", clickFn)与$("#element").on("click", clickFn);

完全相同

$("body").delegate("#element", "click", clickFn)与$("body").on("click", "#element", clickFn)

完全相同

事实上，当.on()和.bind()被触发时，jQuery会在内部调用.delegate()。

Answer 2

如果我没错：所有单元格的一个事件处理程序

 $('table').on('click', 'td', function(){...});

为每个td

分隔事件处理程序

$('table td').on('click', function(){...});

Answer 3

使用三个参数，您将使用“事件委派”。这种技术可以避免两个麻烦：

保持更好的内存性能，因为您将事件附加到父元素，因此您只有一个事件对许多事件有效，例如，您可以将事件委托附加到id为“my”的div -element“并管理所有段落的点击：

$("#my-element").on('click', 'p', function(event) {});

如果您在页面上有关联的事件（例如，点击所有段落）并使用ajax加载更多段落并放置html，则新元素将不会关联先前的事件，例如：< / p>

// jquery will find all "p" on the DOM
$("p").on('click', function(event) {
        // click on element p
    });


// now, if you add more elements p to the DOM, will not have 
// the previous click event, but with event delegation click event will be available automatically

Answer 4

区别在于您希望如何将某个元素查找与特定表达式中的目标元素作为目标。

public void myMethod(View v) { String tagId = v.getTag().toString(); // Create intent with extras like above } - ＆gt;这只会在$(".class1 .class2").on("click" , function(){});

中的类class2上调用click事件

例如：

class1

$(".class1 .class2").on("click" , function(){ $(this) // represents elements with class2 inside class1 }); - ＆gt;这将针对点击事件期间$(".class1").on("click" , ".class2", function(){});内class2类的元素。

例如：

class1

jQuery .on（）函数中可选选择器的重点是什么？

4 个答案: