Question

I’m trying to add a link to delete a row from a mysql database using jquery and ajax. The data is currently displayed in a table. For some reason, the Click event isn’t triggering.

Here’s my AJAX call:

<script>
$(document).ready(function() {
/* load table with page load*/
$("#sort tbody").load("inc/index_table.php");

/* row deletion */
$(".deletelink").click(function(){
   var id = $(this).attr("id");
   $.ajax({
        beforeSend: function (request) {
        var answer = confirm("Are you SURE you want to delete this?/nThis action is NOT reversible.")
        if (answer){ return(true); }
        else { return(false); }
        },
        type: "POST",
        url: location.href,
        data: "delete="+id,
        error: function() {
            console.log("Theres an error with AJAX deletion");
        },
        success: function(){ //a.td.tr.remove just that row rather than the whole table
            $this.parent().parent().remove();
            console.log("Deleted.");
        }
   });
}); 

});
</script>

And the relevant HTML:
this is part of a while loop that prints a table from my database:

<td><a class="deletelink" id="'.$row["id"].'"><img src="images/delete.png" alt="Delete"></a></td>';

My code specifies <a class="deletelink"> but it’s not registering with $(".deletelink").click(function(){ });

Does anyone see what could be wrong here or have an alternate method to suggest?

Answer 1

Looks like you are loading the elements dynamically. You can only bind to elements which currently exist in the DOM. To bind to elements which you are about to add, you must attach the event to a static element, the closer it is to the dynamic content, the better.

Try using on() with a delegate.

$("#sort tbody").load("inc/index_table.php");

/* row deletion */
$("#sort tbody").on("click", ".deletelink", function(){
   //...rest of code the same
});

on() was added in jQuery 1.7. If you are using a previous version, but higher than 1.4.2 you can use delegate() instead.

$("#sort tbody").load("inc/index_table.php");

$("#sort tbody").delegate(".deletelink", "click", function(){
   //...rest of code the same
});

If #sort or tbody of $("#sort tbody") is also dynamic then $("document").on("click", "#sort tbody .deletelink", function(){...}) would work as well, though anything closer than document is better off course.

Edit
I’m just looking at your code again, the delegate binding should work, however, using load()‘s success callback should work with your existing code too.

The callback is executed ones load has successfully completed. I’m not 100% certain but I’m assuming that when success is called that the elements already have been loaded into the DOM and as such the normal bindings should work.

If that doesn’t work the dynamic bindings mentioned above should.

$("#sort tbody").load("inc/index_table.php", function(){
    /* row deletion */
    $(".deletelink").click(function(){
        // .. your code as before.
    });
});