jQuery事件处理程序.on（）不起作用

Posted 2023-05-07

【中文标题】jQuery事件处理程序.on（）不起作用

【英文标题】：jQuery event handler .on() not working

【发布时间】：2012-01-26 18:00:11

【问题描述】：

我想将一个事件附加到动态创建的元素类。所以我使用了实时功能，但它没有被触发。所以检查了live function reference，下面有红色的注释

从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 来 附加事件处理程序。旧版本 jQuery 的用户应该使用 .delegate() 优先于 .live()。

所以决定使用on 功能，但它仍然无法正常工作。文本字段已经附加了 jquery ui datpicker。在另一个元素上选择我禁用了该字段。

jQuery("#from").attr('disabled','disabled')
.removeClass('date_picker_bg')
.removeClass('hasDatepicker')
.addClass('date_picker_disabled');

如果我点击禁用后我想显示警报或工具提示。所以我尝试了这个，但没有工作

jQuery(".date_picker_disabled").on("click", function(event)
          alert('hi');
  );

可能是什么问题

我正在使用 jquery 1.7.1 (jquery-1.7.1.min.js)

【问题讨论】：

你有一个小的 jsfiddle 来解释你的问题吗

@Purmou:even live 不适合我

【参考方案1】：

问题是jQuery(".date_picker_disabled") 找到具有该类的元素并绑定到它们。如果元素在绑定时没有类，则不会处理事件。

on 函数允许您在事件“冒泡到”父元素时通过在另一个元素上处理它们来解决此问题。在这种情况下，我们可以说body 元素——您可以选择更具体的共同父元素。

jQuery(document.body).on('click', '.date_picker_disabled', function(event) 
    alert('hi');
);

事件处理程序现在绑定到document.body 元素。所有在正文中任何地方发生的点击都会被测试以查看它们是否来自与选择器匹配的元素。如果是，则触发处理程序。

on 函数的文档对此进行了解释。它与以前版本的 jQuery 中存在的行为相同，带有 live 和 delegate 函数。

---

再次查看您的代码后，您在 input 元素上设置了 disabled="disabled"。 click 事件不会在禁用元素上触发。

【讨论】：

：有效编辑，你对此有什么想法吗？我可以在禁用元素上触发其他事件吗？还有一个疑问 jQuery('document.body') 是正确的还是 jQuery(document.body)

@gowri 大概你可以将禁用的输入标签放在div 中并将点击事件绑定到 div。或者您可以将其设为只读并将其样式设置为禁用（我不确定这是否会停止点击事件，但我猜它不会）

jQuery(document.body) 与 jQuery('body') 相同。前者更快：基于 DOM 元素的 jQuery 选择是最快的方法。我认为readonly 可能是最适合您的解决方案。

还值得注意的是，如果您尝试应用这种类型的 .on() 的“父元素”在应用 .on() 时必须存在。这意味着如果您的父元素也是动态的，则将父元素向上提升，直到您有一个在 apply .on() 时可用的静态元素。我刚刚遇到了这个问题..

这个解释的某些部分让我非常清楚.on() 是如何工作的，尤其是“当事件“冒泡到“父元素”。很有见地。谢谢。

【参考方案2】：

这很棘手。

当您的代码运行时，您的元素没有 .date_picker_disabled 类，因此您的 jQuery(".date_picker_disabled") 不返回任何内容，并且不会调用 .on()。

在外部元素上应用 .on() 并使用选择器参数：

// you can also do $(document).on()
$(<outer element>).on('click', '.date_picker_disabled', function() 
    // do something
);

这会将事件委托给<outer element>。仅当单击类为 .date_picker_disabled 的元素（第二个参数）时，才会执行处理程序。

【讨论】：

请注意 不应该是动态生成的！

@ijasnijas > 我猜你只是说当你调用.on()时它们必须存在于DOM中。否则，它们可能是生成的。

【参考方案3】：

来自.live()的文档：

根据其继承者重写 .live() 方法是 直截了当;这些是所有等价调用的模板 三种事件附加方式：

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+ 
$(document).on(events, selector, data, handler);        // jQuery 1.7+

所以在你的情况下，你会这样做：

$(document).on('click', '.date_picker_disabled', function(event)
    alert('hi');
);

【讨论】：

这很有帮助，但我花了一段时间才真正明白要点。你应该强调它。

【参考方案4】：

我使用的是 jQuery 1.7.2 并尝试了所有建议的方法：

没用：

$(document.body).on('click', '.collapsible-toggle'  function() 
    console.log('clicked');
); 

没用：

$(document).on('click', '.collapsible-toggle'  function() 
    console.log('clicked');
); 

在我尝试以下方法之前，它们都不起作用：

-- 成功了！ ----

$('body .collapsible-toggle').on('click',   function() 
        console.log('clicked');
); 

【参考方案5】：

也许你应该这样做：

jQuery("body").on("click",".date_picker_disabled", function(event)
          alert('hi');
  );

通过这种方式，您将事件处理程序附加到 bosy 并指定仅在匹配选择器“.date_picker_disabled”时触发该事件。 顺便说一句，这正是 live() 的工作原理

【参考方案6】：

试试：

$(document.body).on( "click", ".date_picker_disabled", function()    
   alert('hi');
);

document.body 也有助于动态 html。 只需检查一下：.on not working on dynamic html