Jquery $（文档）。在（'；单击'；，'；。类名'；）上触发多个

我有一个项目列表。每一行都有一个删除按钮，当被触发时将从数据库中删除一个文档。每个删除按钮都绑定到一个单击事件，并在服务器端调用一个Ajax方法。当Ajax success:事件被触发时，我想从列表中删除整行$（“.parent row”），并显示一条通知消息

发生的情况是，button click事件为正确的按钮/行触发，并调用服务器端的delete，我可以从DOM中删除该行……但是如果我随后立即删除第二个文档……不仅要删除的文档的button click事件会触发上一个文档中的button click事件按钮点击事件也会触发…所以我有两个事件触发…一个成功完成…一个失败…如果我删除了第三个文档…那么我会得到两个失败和一个成功…如此类推

我只是想知道为什么/如何在元素从DOM中移除之后事件仍然触发…以及如何修复

HTML:

实际上，我遗漏了一些代码……我所包含的Ajax调用只有在用户单击模式窗口的“是”按钮时才会被调用……我就是这样显示窗口的：

<div id="confirmWindow" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="confirmTitle"></h4>
            </div>
            <div class="modal-body">
                <h5 id="confirmMessage"></h5>
                <h6><em id="confirmPrompt">Do you want to continue?</em></h6>
            </div>
            <div class="modal-footer">
                <div class="btn btn-lg btn-primary" data-dismiss="modal" id="btnYes">YES</div>
                <div class="btn btn-lg btn-warning" data-dismiss="modal" id="btnNo">NO</div>
            </div>
        </div>
    </div>
</div>

---

您的JS代码可以如下所示：

$(document).ready(function() {
  $('.fa-trash').click(function() {
    //alert($(this).attr('class'));
    var parent_row = $(this).parents('.parent-row');
    console.log(parent_row);
    $(parent_row).fadeOut();
    //$(parent_row).remove();//if you want to remove the row, uncomment this line
  });
});

---

在你编辑之后，我知道你现在的问题是什么了。每次单击

.confirm del document

，您都会调用

ConfirmMessage

，这反过来会将另一个单击处理程序附加到

#btnYes

和

#btnNo

按钮。事件处理程序可以堆叠，因此每次调用

ConfirmMessage

，您都在添加另一个处理程序。您可以通过替换

$（'#btnYes'）来解决此问题。单击（function（）{}）

以

$（'#btnYes'）。一（'click'，function（）{}）

。并对

#btnNo

按钮执行相同操作

.one（）

是一个jquery函数，它为特定类型附加事件（在本例中为“单击”）不超过一次

更多关于

.one（）

的信息，请点击此处：

---

另一个解决方案是从

ConfirmMessage

函数中删除执行ajax调用的回调参数。只需将它们附加到

ConfirmMessage

函数之外即可。像这样：

//Code to display Modal ConfirmWindow
function ConfirmMessage(title, message, prompt, callback) {
    message = message || '';
    $('#confirmTitle').html(title);
    $('#confirmMessage').html(message);

    if (prompt)
        $('#confirmPrompt').html(prompt);

    $('#confirmWindow').modal({ show: true });

} 

$('#btnYes').click(function (e) {
    // user confirmed 'Yes'
    $('#confirmWindow').modal('hide');
    $.ajax({
        url: '/ServiceRun/RemoveDocument',
        type: 'POST',
        datatype: 'json',
        data: {
            xRefId: refID
        },
        success: function (data) {
            if (data.Success) {
                $(sourceButton).removeClass("confirm-del-document"); //remove the click event from this button before removing it from the DOM
                $(parentRow).fadeOut("slow", function () {
                    $(this).remove();
                    ShowMessage(data.Message, 'success');
                }); //remove the row ...slowly....                                                                                                         
            }
            else {
                ShowMessage(data.ErrorMessage, 'danger');
            }
        },
        error: function (jqXHR, status, message) {
            ShowMessage(message, 'danger');
        }
    });
});

$('#btnNo').click(function (e) {
    //  user confirmed 'No'
    $('#confirmWindow').modal('hide');

    // Don't need to make the ajax here
});

---

能否显示附加回调的代码以及

ShowMessage

的代码？看起来每次删除按钮时都会附加回调。如果该ajax是在单击处理程序中执行的，

.off（'click'）

不应该做任何事情，因为它只会影响该行，并且您会立即删除该行。还有一点有用的建议：我想您应该将

.remove

放在“complete”中回调

.fadeOut

，因为我认为在您的代码中，它会在有机会淡出之前立即删除。这肯定是一个“索引”问题。显示更多代码。您可能使用

.eq（）

是基于一些我无法理解的东西。因此，请显示单击处理程序。另外，为什么要使用div作为“按钮”？这是一个可访问性失败，因为只有键盘用户才能使用该页面。您应该使用一个实际的按钮或链接（按照您认为合适的样式）。另外，

async:false

？请不要这样做。感谢@KodosJohnson提供的提示淡出/删除建议…很有意义，并按预期工作….

$（文档）。ready（）

确实过时了；使用

$（function（）{}）

@Soviut，在哪里可以阅读有关

$（document）.ready（）的文档

已过时？Thanks@VandolphReyes在jQuery网站上<代码>从jQuery 3.0开始，只建议使用第一种语法；其他语法仍然有效，但已被弃用。这是因为选择对.ready（）方法的行为没有影响ACCEPTED.one（“click”）。。。。。工作……非常感谢@Kodos Johnson！因为我在我的应用程序的其他地方重复使用了这段确认代码（在那里我看到了类似的行为）。。。通过将.one（“click”）事件添加到ConfirmationMessage函数中的特定按钮，意味着我不必调整任何现有代码，多个事件不再触发！

<div id="confirmWindow" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="confirmTitle"></h4>
            </div>
            <div class="modal-body">
                <h5 id="confirmMessage"></h5>
                <h6><em id="confirmPrompt">Do you want to continue?</em></h6>
            </div>
            <div class="modal-footer">
                <div class="btn btn-lg btn-primary" data-dismiss="modal" id="btnYes">YES</div>
                <div class="btn btn-lg btn-warning" data-dismiss="modal" id="btnNo">NO</div>
            </div>
        </div>
    </div>
</div>

//Code to display Modal ConfirmWindow
function ConfirmMessage(title, message, prompt, callback) {
    message = message || '';
    $('#confirmTitle').html(title);
    $('#confirmMessage').html(message);

    if (prompt)
        $('#confirmPrompt').html(prompt);

    $('#confirmWindow').modal({ show: true });

    $('#btnYes').click(function (e) {
        // user confirmed 'Yes'
        $('#confirmWindow').modal('hide');
        if (callback) callback(true);
    });

    $('#btnNo').click(function (e) {
        //  user confirmed 'No'
        $('#confirmWindow').modal('hide');
        if (callback) callback(false);
    });
} 

$(document).ready(function() {
  $('.fa-trash').click(function() {
    //alert($(this).attr('class'));
    var parent_row = $(this).parents('.parent-row');
    console.log(parent_row);
    $(parent_row).fadeOut();
    //$(parent_row).remove();//if you want to remove the row, uncomment this line
  });
});

//Code to display Modal ConfirmWindow
function ConfirmMessage(title, message, prompt, callback) {
    message = message || '';
    $('#confirmTitle').html(title);
    $('#confirmMessage').html(message);

    if (prompt)
        $('#confirmPrompt').html(prompt);

    $('#confirmWindow').modal({ show: true });

} 

$('#btnYes').click(function (e) {
    // user confirmed 'Yes'
    $('#confirmWindow').modal('hide');
    $.ajax({
        url: '/ServiceRun/RemoveDocument',
        type: 'POST',
        datatype: 'json',
        data: {
            xRefId: refID
        },
        success: function (data) {
            if (data.Success) {
                $(sourceButton).removeClass("confirm-del-document"); //remove the click event from this button before removing it from the DOM
                $(parentRow).fadeOut("slow", function () {
                    $(this).remove();
                    ShowMessage(data.Message, 'success');
                }); //remove the row ...slowly....                                                                                                         
            }
            else {
                ShowMessage(data.ErrorMessage, 'danger');
            }
        },
        error: function (jqXHR, status, message) {
            ShowMessage(message, 'danger');
        }
    });
});

$('#btnNo').click(function (e) {
    //  user confirmed 'No'
    $('#confirmWindow').modal('hide');

    // Don't need to make the ajax here
});