使用复杂选择器将.live()转换为.on()

Question

如何将。live()转换为。on()?

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

要转换为.on()，我可以创建如下所示的两个工作示例，但随后我必须重用这两个示例中的代码，而对于.live()示例，我能够引用两个选择器，并且代码将在任何一个选择器的单击事件上执行。另外，我使用.live()是因为点击处理程序需要应用于加载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(){
}

我已经尝试过了，但这是不正确的，因为'[id^=generic2_id_]'将被解释为数据而不是第二个选择器。

 // 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(){

您的原始代码将绑定一个点击事件到所有匹配[id^=generic1_id_]的元素，并将事件过滤为仅由匹配[id^=generic2_id_]的元素引发的事件

Answer 2

试试这个:

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