动态添加的类上的事件答案

【问题标题】：Events on dynamically added classes动态添加的类上的事件
【发布时间】：2013-08-21 19:47:59
【问题描述】：

我有一个表单，其中按钮的类是动态变化的，具体取决于请求的来源。我正在尝试捕获 onclick 事件，但它不包含动态添加的类。我确保该类被添加到按钮中。我哪里出错了。

片段 --

   $('.button').removeClass('oldClass');
   $('.button').addClass('newClass');

   <button class = "button">Button</button>

点击--

     $('.newClass').click(function(){
          alert("test");
     });

虽然按钮类已更改为 newClass，但代码未到达此事件事件。

谢谢

【问题讨论】：

【解决方案1】：

那是因为当你绑定点击事件时，元素有另一个类。

试试这样的：

$('body').on('click', '.newClass', function () {
        alert('test');
    });

【讨论】：

【解决方案2】：

通过.bind 之类的方法（或.click 之类的快捷方式）设置事件处理程序仅适用于当前匹配选择器的元素。如果你想为当前匹配的元素以及所有未来匹配的元素设置事件处理程序，那么你应该使用.on。

【讨论】：

【解决方案3】：

您可以尝试在 DOM 加载时直接向按钮添加点击功能，只需使用 .hasClass() 来检查是否已应用 newClass。

$('.button').click(function() {
    if($(this).hasClass('newClass')) {
        //Code for new class click
        alert('test');
    }
});

【讨论】：

【解决方案4】：

我使用 JQuery 提供的委托方法解决了这个问题。

$('body').delegate('.newClass','click', delegatefunction);

function hasClass() {
   alert("Hello!!");
}

感谢您的帮助。

【讨论】：