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

Question

我想将一个事件附加到动态创建的元素类。所以我使用了实时功能，但它没有被触发。所以检查了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)

Answer 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 事件不会在禁用元素上触发。

Answer 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 的元素（第二个参数）时，才会执行处理程序。

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

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

Answer 5

也许你应该这样做：

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

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

Answer 6

试试：

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

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