CODEWITHSUNDEEP
phpjavascripthtmljquery
Rukon Khan
Rukon Khan

Reputation: 1

Jquery doesnt work after loading content via ajax

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>

Upvotes: 0

Views: 192

Answers (1)

Eric S
Eric S

Reputation: 1363

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).

Upvotes: 3

Related Questions