AJAX GET request content not responding to jQuery

Question

I'm currently trying to display the memberlist of all my users with a AJAX get request. Everything is working fine, but the content it appends to my HTML does not respond to another jQuery script.

Is there a way to hardcode the retrieved content in my HTML?

Here's get request I'm using:

jQuery(document).ready(function() {
    $.get("../assets/includes/memberlist.php", function(data) {
        $(".to-show").html(data);
    });
});

The retrieved content has several divs in it, which I should be able to toggle. But this isn't working. If I view my source code, the appended data isn't visible in the source code.

Here's the script which should do the toggle trick:

jQuery(document).ready(function($) {

  var $mores = $('.event-toggle').hide();
  var $items = $('.event-title');

  var $titles = $('.event-title').click(function() {
    var $more = $(this).next('.event-toggle').slideToggle();
    $mores.not($more).slideUp();
    var $title = $(this).toggleClass('event-title active-title');
    $titles.not($title).removeClass('active-title').addClass('event-title')
    return false;
  });
});

Thanks for any help!

Answer 1

You won't be able to see any newly added snippets to the DOM by just viewing the source code of the page. You should be able to use Firebug or Chrome developer tools and then inspect the DOM to see the newly added content.

Also bear in mind that the JQuery GET request is asynchronous so you cannot rely on it being available in your second snippet. You should ideally have placed that code in a function and then called it when the GET request completed successfully.

jQuery(document).ready(function() {
    $.get("../assets/includes/memberlist.php", function(data) {
        $(".to-show").html(data);
        /* FUNCTION TO OPERATE ON NEWLY ADDED DOM SHOULD GO HERE */
    });
});