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

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

从jQuery 1.7开始，.live((方法已被弃用。使用 .on(( 来附加事件处理程序。旧版本的jQuery的用户应该使用 .delegate(( 优先于 .live((。

所以决定在功能上使用，但它仍然不起作用。文本字段已经附加了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(

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

这

很棘手。

当代码运行时，元素没有类.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 的元素(第二个参数(时，才会执行处理程序。

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

我正在使用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');
});

也许你应该这样做：

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

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

试试：

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

document.body 也有助于动态 HTML。只需检查一下： .on 不适用于动态 html

相关内容

最新更新

热门标签：