Jquery doesnt work after loading content via ajax

Question

I am new with java script. The code I have for deleting table row works fine when table already exists in the page but it doesnt work if I load table from another page by ajax call.. please help me to solve this.. java script is here

$(document).ready(function()
{
    $('table#delTable td a.delete').click(function()
    {
        if (confirm("Are you sure you want to delete this row?"))
        {
            var id = $(this).parent().parent().attr('id');
            var data = 'id=' + id ;
            var parent = $(this).parent().parent();

            $.ajax(
            {
                   type: "POST",
                   url: "delete_row.php",
                   data: data,
                   cache: false,

                   success: function()
                   {
                        parent.fadeOut('slow', function() {$(this).remove();});
                   }
             });                
        }
    });

    // style the table with alternate colors
    // sets specified color for every odd row
    $('table#delTable tr:odd').css('background',' #FFFFFF');
});

html code

<table id="delTable">       


    <tr id="ripon">
        <td align="left">Ipsum</td>
        <td align="center">19</td>
        <td align="center">17</td>
        <td align="center"><a href="#" class="delete" style="color:#FF0000;"><img alt="" align="absmiddle" border="0" src="img/delete.png" /></a></td>
    </tr>
    <tr id="rukon">
        <td align="left">Dolor</td>
        <td align="center">55</td>
        <td align="center">12</td>
        <td align="center"><a href="#" class="delete" style="color:#FF0000;"><img alt="" align="absmiddle" border="0" src="img/delete.png" /></a></td>
    </tr>
    <tr id="sumon">
        <td align="left">Sit</td>
        <td align="center">11</td>
        <td align="center">18</td>
        <td align="center"><a href="#" class="delete" style="color:#FF0000;"><img alt="" align="absmiddle" border="0" src="img/delete.png" /></a></td>
    </tr>
    <tr id="mamun">
        <td align="left">Amet</td>
        <td align="center">29</td>
        <td align="center">27</td>
        <td align="center"><a href="#" class="delete" style="color:#FF0000;"><img alt="" align="absmiddle" border="0" src="img/delete.png" /></a></td>
    </tr>

Eric S · Accepted Answer · 2013-04-25 01:49:24Z

3

The easiest solution for this is to use "Delegated Events". For more information, see jQuery's on docs.

$("body").on("click", "table#delTable td a.delete", function(event){
  // insert your code here
});

Note: while I called on on body, you can call it on something "closer" to the table, if it's going to be there when the page loads (or more specifically, when you make the on call).

answered Apr 25, 2013 at 1:49

Eric S

1,3631 gold badge10 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jquery doesnt work after loading content via ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related