Binding a click event to entities loaded dynamically using jQuery on()

Question

This is a common question asked many times but I am not able to find a solution for my problem.

I have a HTML table in which the data is loaded using ajax. I need to bind a click event to the delete link. Since this data is loaded using ajax I have tried using jQuery on() method as shown below.

$('.datagrid').on('load', '.action', function(){
        $('.action a#deleteTrigger').each(function() { 
            $(this).click(function() {
                alert('called..');
            })
        });
    })

But this doesn't work. Below is a simple illustration of my HTML DOM.

<table class='datagrid'>
    <tr id="row-1">
       <td class="">
          1                         
       </td>
       <td class="">
          admin                         
       </td>
       <td>
         <a id="deleteTrigger" href="#">Delete</a>
       </td>
    </tr>
    <tr id="row-2">
       <td class="">
          1                         
       </td>
       <td class="">
          admin                         
       </td>
       <td>
         <a id="deleteTrigger" href="#">Delete</a>
       </td>
    </tr>
    <tr id="row-3">
       <td class="">
          1                         
       </td>
       <td class="">
          admin                         
       </td>
       <td class='action'>
         <a id="deleteTrigger" href="#">Delete</a>
       </td>
    </tr>
</table>

Can anyone please help me with this?

Answer 1

There is no load event triggered by loading via ajax so trying to use it won't accomplish anything.

In addition, it looks like you have duplicate ids in the content. An id must be unique in the document and trying to use a selector to find duplicate ids won't work. You should be using a class name.

Probably, the better way to solve the event handlers on dynamically loaded elements is to use delegated event handling on a class name in the content.

If you change your HTML to a class name like this:

<a class="deleteTrigger" href="#">Delete</a>

Then, assuming the top of the table isn't loading dynamically you can bind to it with delegated event handling like this:

$(".datagrid").on("click", ".deleteTrigger", function(e) {
    // click handler for delete button
});

If even the top of the table is loaded dynamically, then you can change to other static parent higher up in the DOM (you should pick a parent as close to the content as possible as long as it is not dynamically loaded) like this:

$("selector of some static parent").on("click", ".deleteTrigger", function(e) {
    // click handler for delete button
});

You can see these other references on delegated event handling with .on() :

jQuery .live() vs .on() method for adding a click event after loading dynamic html

jQuery .on does not work but .live does

Does jQuery.on() work for elements that are added after the event handler is created?

Answer 2

use class instead of id

<td class='action'>
         <a class="deleteTrigger" href="#">Delete</a>
</td>

and in javascript

$(document).on("click",".deleteTrigger",function(e){
          alert('called..');
          e.preventdefault()
});

this may help you.