how to make jquery work with ajax?

Question

Have the below code which loads a php page into a div, once this content is added the jquery on that php page doesnt seem to work. It only works if you open it directly (without ajax)

any ideas?

AJAX CODE

<script>
   $(document).ready (function() {
      $('#NavButton1').click(function(event) {
        $('#content').empty();
        $('#content').load('placeholder.php');
      })
    })
</script>

Jquery code on PHP page

<script>


$(document).ready(function() { 

    // call the tablesorter plugin 
    $('#myTable').tablesorter({ 
        // sort on the first column and third column, order asc 
        sortList: [[0,0],[2,0]] 
    }); 
}); 

</script>

make sure the jquery on the loaded page comes AFTER the elements it needs to affect. — Kevin B, Dec 09 '13 at 22:13

Samuel · Accepted Answer · 2013-12-10T08:39:30.013

3

document.ready is not triggered when you load your PHP.

But the right way to have a script run after you load external content would be to use a callback function:

$('#content').load('placeholder.php', function() { 
    // call the tablesorter plugin 
    $('#myTable').tablesorter({ 
        // sort on the first column and third column, order asc 
        sortList: [[0,0],[2,0]] 
    }); 
});

edited Dec 10 '13 at 08:39

answered Dec 09 '13 at 22:16

Samuel

2,106
1
17
27

how to make jquery work with ajax?

1 Answers1