Question

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

正在发生的事情是按钮单击事件触发正确的按钮/行并调用服务器端删除，并且我能够从DOM中删除该行....但是如果我删除了紧接着之后的第二个文件......不仅我想要删除的文件的按钮点击事件开始......来自PREVIOUS按钮点击事件的按钮点击事件也会触发...所以我有2个事件一个人成功完成......一个人失败了...如果我删除了第三个文件......那么我得到了2个失败和1个成功......并且这样做......

我只是想知道为什么/如何在从DOM中删除元素后仍然触发事件....以及如何解决这个问题。

HTML：

<div class="panel panel-default panel-thin parent-row">
    <div class="panel-body">
        <h6 class="pull-left">somefilename.pdf</h6>
        <div class="btn btn-danger pull-right confirm-del-document" data-ref-id="999" data-filename="somefilename.pdf"><i class="fa fa-trash"></i> Delete</div>
    </div>
</div>

更新的JAVASCRIPT： 我已经附上了整个onclick事件：

$(document).on(".confirm-del-document","click", function (e) {
    var refID = $(this).data("ref-id");
    var docName = $(this).data("filename");
    var parentRow = $(this).closest(".parent-row");
    var sourceButton = $(this);

    ConfirmMessage("Delete Service Run Document", "You are going to delete:<br/><small class='text-danger'>'" + docName + "' from this Service Run'.</small>", "Do you want to continue?", function (response) {
        if(response == true) {
                $.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');
                    }
                });
            }
        });
    });         
});

更新我正在使用Bootstrap notify来发送通知......

ShowMessage代码：

function ShowMessage(notificationMessage, type) {
    //notify
    $.notify({
        message: notificationMessage
        },
        {
            // settings
            type: type,
            placement: {
            from: "bottom",
            align: "right"
        },
        animate: {
            enter: 'animated fadeInUp',
            exit: 'animated fadeOutDown'
        },
        z_index: 10000,
    });
}

我实际上遗漏了一些代码......只有当用户点击＆＃34; YES＆＃34;时才会调用我所包含的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>

这是管理确认窗口的功能

//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);
    });
}

Answer 1

编辑完成后，我会看到您现在遇到的问题。每次点击.confirm-del-document时，都会调用ConfirmMessage，然后会将另一个点击处理程序附加到#btnYes和#btnNo按钮。事件处理程序可以堆叠，因此每次调用ConfirmMessage时，都会添加另一个处理程序。您可以将$('#btnYes').click(function(){})替换为$('#btnYes').one('click', function(){})来解决此问题。并对#btnNo按钮执行相同操作。

.one()是一个jquery函数，它为特定类型（在本例中为“click”）附加事件的次数不超过一次。

有关此.one()的更多信息：http://api.jquery.com/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
});

Answer 2

您的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
  });
});

$（文件）.on（＆＃39;点击＆＃39;，＆＃39; .class-name＆＃39;）解雇多个

2 个答案: