jQuery 事件处理程序 .on() 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8614981/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery event handler .on() not working
提问by Gowri
I want to attach a event to dynamically created element class.So i used live function but it was not triggered. So checked live function reference,there i red below notes
我想将一个事件附加到动态创建的元素类。所以我使用了实时功能，但它没有被触发。所以检查了实时功能参考，我在下面的注释中变红了
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应该优先使用 .delegate() 而不是 .live()。
so decide to use onfunction,But it still not working.The text field is already attached with jquery ui datpicker.On another element select i disabled that field.
所以决定在函数上使用，但它仍然不起作用。文本字段已经附加了 jquery ui datpicker。在另一个元素上选择我禁用了该字段。
jQuery("#from").attr('disabled','disabled')
.removeClass('date_picker_bg')
.removeClass('hasDatepicker')
.addClass('date_picker_disabled');
after disabled if i click i want to show alert or tooltip.so i tried this,but not working
禁用后，如果我点击我想显示警报或工具提示。所以我试过这个，但不工作
jQuery(".date_picker_disabled").on("click", function(event){
alert('hi');
});
What may be the problem
可能是什么问题
I am using jquery 1.7.1 ( jquery-1.7.1.min.js)
我正在使用 jquery 1.7.1 ( jquery-1.7.1.min.js )
回答by lonesomeday
The problem is that jQuery(".date_picker_disabled")finds elements with that class and binds to them. If elements don't have the class at the time the binding is made, the events will not be handled.
问题是jQuery(".date_picker_disabled")找到具有该类的元素并绑定到它们。如果元素在进行绑定时没有类，则不会处理事件。
The onfunction allows you to get round this by handling them on another element when the event "bubbles up to" a parent element. In this instance, we could say the bodyelement – there may be a more specific common parent you could choose.
on当事件“冒泡”到父元素时，该函数允许您通过在另一个元素上处理它们来解决这个问题。在这种情况下，我们可以说body元素——你可以选择一个更具体的公共父元素。
jQuery(document.body).on('click', '.date_picker_disabled', function(event) {
alert('hi');
});
The event handler is now bound to the document.bodyelement. All clicks that happen anywhere in the body are tested to see if they originated from an element matching the selector. If so, the handler is fired.
事件处理程序现在绑定到document.body元素。身体中任何地方发生的所有点击都经过测试，以查看它们是否源自与选择器匹配的元素。如果是，则触发处理程序。
This is explained on the documentation for the onfunction. It is the same behaviour as was present in previous versions of jQuery with liveand delegatefunctions.
这在on函数的文档中进行了解释。它与以前版本的带有live和delegate函数的 jQuery 中存在的行为相同。
Having taken another look at your code, you have disabled="disabled"set on your inputelement. clickevents are not fired on disabled elements.
再次查看您的代码后，您已经disabled="disabled"设置了您的input元素。click事件不会在禁用元素上触发。
回答by Didier Ghys
This is tricky.
这很棘手。
When your code runs, your element does not have .date_picker_disabledclass so your jQuery(".date_picker_disabled")returns nothing and .on()is not called.
当您的代码运行时，您的元素没有.date_picker_disabled类，因此您不jQuery(".date_picker_disabled")返回任何内容并且.on()不会被调用。
Apply .on() on the outer element and use the selector parameter:
在外部元素上应用 .on() 并使用选择器参数：
// you can also do $(document).on()
$(<outer element>).on('click', '.date_picker_disabled', function() {
// do something
});
This will delegate the event to the <outer element>. The handler will only be executed if an element with class .date_picker_disabledhas been clicked (second param).
这会将事件委托给<outer element>. 只有.date_picker_disabled在单击了具有类的元素（第二个参数）时才会执行处理程序。
回答by Peter-Paul van Gemerden
From the documentation of .live():
从文档.live()：
Rewriting the .live() method in terms of its successors is straightforward; these are templates for equivalent calls for all three event attachment methods:
$(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+
就其继承者而言重写 .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+
So in your case, you would do:
所以在你的情况下，你会这样做：
$(document).on('click', '.date_picker_disabled', function(event){
alert('hi');
});
回答by Eduardo Chongkan
I was using jQuery 1.7.2 and tried all proposed methods:
我正在使用 jQuery 1.7.2 并尝试了所有建议的方法：
Didn't work:
没有用：
$(document.body).on('click', '.collapsible-toggle' function() {
console.log('clicked');
});
Didn't work:
没有用：
$(document).on('click', '.collapsible-toggle' function() {
console.log('clicked');
});
None of them worked until I tried the following:
在我尝试以下操作之前，它们都不起作用：
----- Worked! ----
----- 成功了！----
$('body .collapsible-toggle').on('click', function() {
console.log('clicked');
});
回答by Nicola Peluchetti
Maybe you should do:
也许你应该这样做：
jQuery("body").on("click",".date_picker_disabled", function(event){
alert('hi');
});
in this way you attach the event handler to the bosy and specify to fire that event only when that selector ".date_picker_disabled" is matched.
BTW this is exactly how live()worked
通过这种方式，您将事件处理程序附加到 bosy 并指定仅在匹配选择器“.date_picker_disabled”时触发该事件。
顺便说一句，这正是live()工作的方式
回答by Asmita
try :
尝试 ：
$(document.body).on( "click", ".date_picker_disabled", function() {
alert('hi');
});
document.bodyhelps for dynamic html too. Just chekc it out: .on not working on dynamic html
document.body 也有助于动态 html。只需检查一下：.on not working on dynamic html
