Question

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

禁用后，如果我点击我想显示警报或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中使用live和delegate函数的行为相同。

再次查看代码后，您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');
});

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

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

6 个答案: