jQuery's .click() event stopped working

Question

I have a table where the first column of each row contains several icons, each one inside an a element:

<a title="aaa@aaa.es" class="delete" href="#" data-toggle="modal" data-target="#dialogDeleteUser">
    <img alt="delete" src="/recursos/imagenes/iconPapelera.png">
</a>

And I have a jQuery function that should trigger when that link is clicked:

$(document).ready(function(){
    $("a.delete").click(function() {
        var userEmail = $(this).attr("title");
        loadUserDelete(userEmail);
    });

The fact is that it worked for some time, right until I started loading the table content with TableSorter using the Pager widget and through Ajax.

The table loads just fine but for some reason the class doesn't get recognized within that function and I don't know why.

Answer 1

New content added after your code hooking up the event runs will not magically know to re-run that code to set up handlers on the new elements. You can use delegated handling instead:

$("selector for the container of these").on("click", "a.delete", function() {
    var userEmail = $(this).attr("title");
    loadUserDelete(userEmail);
});

Now, the click is hooked to the container all of these links are in. jQuery will call your handler if the click passed through an a.delete element en route to the container whilst bubbling.