Question

我遇到了jQuery点击事件的问题。当我替换div的类时，单击函数仍然适用于上一个类。这是我正在使用的代码：

$(this).removeClass('edit_agent_val').addClass('edit_agent_val2');

点击功能仍适用于edit_agent_val而不是edit_agent_val2。

// This should not work
$('.edit_agent_val').on('click', function(e) {          
     // some code...
});

// This should work
$('.edit_agent_val2').on('click', function(e) { 
    // some code...
});

任何人都可以帮我解决这个问题吗？

Answer 1

问题是因为当元素仍然具有原始类时，事件会在加载时附加。更改类属性的行为不会影响附加到元素的任何事件。

要实现您想要的功能，您需要使用委托的事件处理程序，该处理程序附加到父元素：

$(document).on('click', '.edit_agent_val', function(e) {
     // some code...
});

$(document).on('click', '.edit_agent_val2', function(e) {
    // some code...
});

请注意，我这里仅使用document作为示例。在最终工作代码中，您应该使用与.edit_agent_val元素最接近的父元素。

Answer 2

使用event delegation动态添加和删除类。

如果Dom不知道该类是否被移除，那么使用文档或直接父选择器再次遍历它并检查是否找到了类

$(document/immediateParent).on('click', '.edit_agent_val' ,function(e){          **// This should not work**
     // some code...
});

$(document/immediateParent).on('click', '.edit_agent_val2', function(e){        **// This should work**
    // some code...
});

单击功能仍然适用于已被其他类替换的上一个类

2 个答案: