使用复杂的选择器将.live（）转换为.on（）

Question

如何将它从.live（）转换为.on（）？

$('[id^=generic1_id_]', '[id^=generic2_id_]').live('click', function(){

要转换为.on（），我可以创建下面看到的两个工作示例，但是我必须在两者中重复使用代码，而使用.live（）示例，我能够引用两个选择器和代码将在任一选择器的单击事件上执行。此外，我使用.live（）因为click处理程序需要应用于加载DOM后添加/创建的新元素。我知道下面的.on（）示例适用于现有元素和新元素，但是我必须将它们分开，因为我无法弄清楚如何在使用.on（）时将代码写入两个选择器的位置语法。

// Generic Example - Click handler for elements with an IDs beginning with "generic1_id_"
$(document).on('click', '[id^=generic1_id_]', function(){

}

和

// Generic Example - Click handler for elements with an IDs beginning with "generic2_id_"
$(document).on('click', '[id^=generic2_id_]', function(){

}

我试过了，但这不正确，因为＆＃39; [id ^ = generic2_id _]＆＃39;将被解释为数据而不是第二选择器。

 // Won't work
 $(document).on('click', '[id^=generic1_id_]', '[id^=generic2_id_]', function(){ 

令人惊讶的是，我无法在搜索中找到除了将.live（）转换为.on（）的简单示例之外的任何内容。有什么想法吗？

Answer 1

正确的转换是：

$(document).on('click', '[id^=generic2_id_] [id^=generic1_id_]', function(){

因为使用原文，您在两个不同的选择器之间使用逗号，同时指定选择器和上下文。 .live总是绑定到文档，然后它使用选择器和上下文将到达文档的事件过滤到只匹配选择器的事件，并且是与上下文匹配的元素的后代。

听起来好像你的原始代码实际上并没有按照你的想法行事。

$('[id^=generic1_id_]', '[id^=generic2_id_]').live('click', function(){

您的原始代码会将click事件绑定到与[id^=generic1_id_]匹配的所有元素，并将事件过滤为仅匹配[id^=generic2_id_]

Answer 2

试试这个：

$(document).on('click', '[id^=generic1_id_],[id^=generic2_id_]', function(){ 
//your code goes here
});