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

Question

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

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().

所以决定使用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)

Answer 1

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

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

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

事件处理程序现在绑定(bind)到 document.body 元素。测试正文中任何位置发生的所有点击，看看它们是否源自与选择器匹配的元素。如果是，则处理程序将被解雇。

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

<小时/>

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