Question

我有一个用户表，我有一个从数据库中删除用户的链接。有时它工作正常，但有时候当我确认删除时它会冻结，我必须按下＆＃34; Esc＆＃34;确认窗口消失的按钮。我使用＆＃34; $（文档）.on（＆＃39;点击＆＃39;，function（）＆＃34;因为我通过jquery添加用户，如果我使用＆＃34; $（文档）.ready （function（）＆＃34;新添加的用户不会被删除。您能否查看此脚本是否有错误，并告诉我脚本是否有问题或其他问题？可能有办法改善吗？

脚本

$(document).on('click', function() {
        $("a:contains('Delete')").click(function(event) {
            if(confirm("Are you sure ?")){
                $.ajax({
                    url: $(event.target).attr("href"),
                    type: "DELETE",

                    beforeSend: function(xhr) {
                        xhr.setRequestHeader("Accept", "application/json");
                        xhr.setRequestHeader("Content-Type", "application/json");
                    },

                    success: function() {
                        var tr = $(event.target).closest("tr");
                        tr.css("background-color","#000000");
                        tr.fadeIn(1000).fadeOut(200, function(){
                        tr.remove();})
                    }
                });
            } else {
                event.preventDefault();
            }
            event.preventDefault();
        });
    });

包含删除链接的表格单元格

<a href="/delete/${user.login}.json">Delete</a>

更新：我已经改变了这种方式

脚本

function Delete(event){
            if(confirm("Are you sure ?")){
                $.ajax({
                    url: $(event.target).attr("href"),
                    type: "GET",

                    beforeSend: function(xhr) {
                        xhr.setRequestHeader("Accept", "application/json");
                        xhr.setRequestHeader("Content-Type", "application/json");
                    },

                    success: function() {
                        var tr = $(event.target).closest("tr");
                        tr.css("background-color","#000000");
                        tr.fadeIn(1000).fadeOut(200, function(){
                        tr.remove();})
                    }
                });
            } else {
                event.preventDefault();
            }
            event.preventDefault();
        };

链路

<a href="/delete/${user.login}.json" onclick="Delete()">Delete</a>

但是现在我被卡在我的href值的网址的空白页面上，但是用户被删除了。

Answer 1

$（文档）.on（每次单击链接时都会触发'click'。因此，每次单击链接时，都会再次添加点击装订。添加新元素后，它们也应该获得绑定。以另一种方式解决这个问题。另见：test if event handler is bound to an element in jQuery

Answer 2

将您的脚本更改为：

function Delete(url,ele){
            if(confirm("Are you sure ?")){
                $.ajax({
                    url: url,
                    type: "GET",

                    beforeSend: function(xhr) {
                        xhr.setRequestHeader("Accept", "application/json");
                        xhr.setRequestHeader("Content-Type", "application/json");
                    },

                    success: function() {
                        var tr = $(ele).closest("tr");
                        tr.css("background-color","#000000");
                        tr.fadeIn(1000).fadeOut(200, function(){
                        tr.remove();})
                    }
                });
            } else {
                return false;
            }
            //event.preventDefault(); no need for this
        };

您的链接：

<a href="javascript:void(0)" onclick="Delete('/delete/${user.login}.json',this)">Delete</a>

脚本奇怪的行为

2 个答案: