jQuery事件处理程序.on()不起作用

Question

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

从jQuery 1.7开始,不推荐使用.live()方法.使用.on()附加事件处理程序.旧版jQuery的用户应该使用.delegate()而不是.live().

所以决定使用on函数,但它仍然没有工作.文本字段已经附加了jquery ui datpicker.On另一个元素选择我禁用该字段.

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

禁用后如果我点击我想显示警报或tooltip.so我试过这个,但没有工作

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

可能是什么问题

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

Answer 1

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

on当事件"冒泡到"父元素时,该函数允许您通过在另一个元素上处理它们来绕过它.在这种情况下,我们可以说body元素 - 您可以选择更具体的共同父母.

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

事件处理程序现在绑定到该document.body元素.测试身体中任何位置发生的所有点击,以查看它们是否来自与选择器匹配的元素.如果是这样,则处理程序被触发.

这在on功能的文档中有说明.它与以前版本的jQuery with live和delegatefunctions中的行为相同.

再看一下你的代码,你已经disabled="disabled"设置了你的input元素.click不会在禁用的元素上触发事件.

Answer 2

这很棘手.

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

在外部元素上应用.on()并使用selector参数:

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

这会将事件委托给<outer element>.只有.date_picker_disabled在单击了具有类的元素(第二个参数)时才会执行该处理程序.

Answer 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');
});