修改div类名后如何解除jQuery旧类选择器的绑定？

核心问题 #

你遇到的问题根源在于事件是直接绑定在DOM元素本身，而非类选择器上。最初给.oldclass绑定点击事件时，事件已经附加到#MyDiv1这个元素上，后续即使移除了oldclass类名，元素上的绑定事件不会自动消失，所以点击仍会触发旧逻辑。另外你的代码存在两处语法错误：

• 移除类名需用removeClass()而非removeAttr()
• 添加类名需用addClass()而非addAttr()

解决方案 #

方法1：事件委托（推荐）

将事件绑定到静态存在的父元素（或document）上，通过选择器过滤触发事件的目标元素。这种方式不受元素类名动态修改的影响，只要元素匹配当前选择器，就会触发对应事件。

// 替换原有直接绑定的方式，改用事件委托
$(document).on('click', '.oldclass', function() {
    alert('I am old');
});

$(document).on('click', '.youngclass', function() {
    alert('I am young');
});

$.ajax({
    // ...其他请求配置
    success: function() {
        // 正确修改类名
        $('#MyDiv1').removeClass('oldclass').addClass('youngclass');
    }
});

方法2：解绑旧事件 + 绑定新事件

在修改类名后，手动解绑元素上的旧点击事件，再绑定新的事件逻辑：

// 初始绑定旧事件
$('#MyDiv1').click(function() {
    alert('I am old');
});

$.ajax({
    // ...其他请求配置
    success: function() {
        // 正确修改类名
        $('#MyDiv1').removeClass('oldclass').addClass('youngclass');
        // 解绑旧事件，绑定新事件
        $('#MyDiv1').off('click').click(function() {
            alert('I am young');
        });
    }
});

方法3：命名空间事件（精准解绑）

如果需要保留元素上其他点击事件，可以给旧事件添加命名空间，解绑时只针对该命名空间的事件：

// 绑定带命名空间的旧事件
$('#MyDiv1').on('click.oldEvent', function() {
    alert('I am old');
});

$.ajax({
    // ...其他请求配置
    success: function() {
        $('#MyDiv1').removeClass('oldclass').addClass('youngclass');
        // 仅解绑oldEvent命名空间的点击事件
        $('#MyDiv1').off('click.oldEvent').on('click', function() {
            alert('I am young');
        });
    }
});

内容的提问来源于stack exchange，提问作者sqlchild