更改div的类后取消绑定类选择器jquery

Question

当 ajax 请求完成时，我动态更改 div 的类。

<div id="MyDiv1" class="oldclass">Age</div>

ajax请求成功函数内部：

 $('.oldclass').click({ alert('I am old'); });

 $('.youngclass').click({ alert('I am young'); });

$.ajax({

........
success: function(){
     $('#MyDiv1').removeAttr('oldclass');

     $('#MyDiv1').addAttr('youngclass'); 
}
});

但是点击oldclass click仍然可以点击这个div。我如何在不刷新整个页面的情况下实现这一目标。

Answer 1

事件处理程序绑定到元素，而不是选择器。这里的一种选择是使用事件委托并绑定到共同的祖先元素。委托的事件处理程序每次都会重新检查选择器。

例如：

$(document).on('click', '.oldclass', () => alert('I am old'));
$(document).on('click', '.youngclass', () => alert('I am young'));

在这种情况下，点击处理程序绑定到

document

而不是单个元素。每当点击事件冒泡到

document

时，它都会检查提供的选择器，看看它是否与发起事件的元素匹配。如果是，则执行事件处理程序。

您不需要使用

document

，任何共同的祖先元素都可以使用。

document

很常用，因为它始终是页面上每个元素的共同祖先。