jQuery：删除由 ajax 成功添加的类答案

【问题标题】：jQuery: remove class added by ajax successjQuery：删除由 ajax 成功添加的类
【发布时间】：2014-03-26 09:08:56
【问题描述】：

我不清楚如何删除由 ajax 成功函数添加的类。我有这个代码：

$.ajax({
    dataType: "json",
    [...]
    success:function(data) {
        for (var i = 0; i < data.length; i++) {
            $('[name="'+data[i]+'"]').addClass('tmvc_err');
        }
    },
});

它基本上为那些没有通过我的 php 验证脚本的字段添加一个红色边框。现在，我正在尝试在更改事件后删除那个红色边框（或者更好的是，尝试删除类 .tmvc_err）。这不起作用：

$(".tmvc_err").on('change', function() {
    $(this).removeClass('tmvc_err');
});

它已在文档中准备好，所以我想问题是由于在文档准备好后通过 ajax 添加了该类，它没有找到该类。那么，我该如何触发呢？

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

尝试在此处使用 event delegation，因为您的类是动态添加的：

事件委托允许我们将单个事件侦听器附加到父元素，将为匹配选择器的所有子元素触发，这些孩子是现在存在还是将来添加。

$("body").on('change','.tmvc_err', function() {
    $(this).removeClass('tmvc_err');
});

【讨论】：

【解决方案2】：

动态添加的元素需要event delegation

$(document).on('change', ".tmvc_err", function() {
    $(this).removeClass('tmvc_err');
});

委托活动

委托事件的优点是它们可以处理来自以后添加到文档中的后代元素。经过选择一个保证在该时间存在的元素附加了委托事件处理程序，您可以使用委托事件避免频繁附加和删除事件处理程序，jQuery docs

【讨论】：

【解决方案3】：

如果是动态添加的，则需要事件委托 -

$(document.body).on('change','.tmvc_err', function() {
    $(this).removeClass('tmvc_err');
});

【讨论】：