Script strange behavior

Question

I have a table with users and i have a link to delete user from database. Sometimes it works fine, but some times it freezes when i confirm deletion and i have to press "Esc" button for confirm window to disappear. I use "$(document).on('click', function()" because i add users via jquery, and if i use "$(document).ready(function()" newly added users won't delete. Could you please check this script for errors and tell me if it's script issue or something else? May be there is a way to improve it?

Script

$(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();
        });
    });

Table cell with delete link

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

UPDATE: I've changed it this way

script

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

link

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

But now i get stuck on a blank page with the url of my href value, but user is deleted.

don't you want to check if your request returned success results before removing the row from your table?? you have to read the response to check if it was successful process in the server side — MaveRick, Aug 22 '13 at 09:14
if you are adding new items to the list i would suggest add the function to `onclick` attribute better than attaching same event many times to the elements on each time the user click anywhere in your page — MaveRick, Aug 22 '13 at 09:17

score 0 · Answer 1 · edited May 23 '17 at 12:20

0

The $(document).on('click' will be fired every time you click a link. So every time you click a link, again the click-bindings are added. After adding new elements, they should get the bindings too. Solve that in another way. See also: test if event handler is bound to an element in jQuery

edited May 23 '17 at 12:20

Community

1
1

answered Aug 22 '13 at 09:51

Niels Steenbeek

4,692
2
41
50

MaveRick · Accepted Answer · 2013-08-22T10:04:09.780

change your script to:

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

And your link to:

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

i'v updated the link and the function, have you changed them both? if so then please check your console to see whats wrong — MaveRick, Aug 22 '13 at 10:07

Script strange behavior

2 Answers2