通过AJAX加载页面时jQuery无法正常工作

Question

I have an index page that has jQuery loaded as well as a js file for a slider plugin. Then I'm using an on click event to use .load to load an external page, like this:

//jQuery loaded from Google CDN here (in head)

jQuery( document ).ready(function() {
    jQuery( ".button" ).click(function() {
        var myUrl = "/url-to-page";
        jQuery( "#target-div" ).load(myUrl);
    });
});

This successfully loads the external page into #target-div, but the jQuery loaded on the index page does not fire on elements loaded from the external page. For example, I have some images (for the slider plugin) on the external page, but the slider plugin doesn't turn them into a slideshow as it would if I put those same images (inside a wrapper div) onto the index page directly.

The external page does not any html, head, or body tags--only the content I want to load wrapped in some divs.

Does anyone know the "trick" to making jQuery work on an externally loaded page?

Answer 1

The issue is your click event has already been bound. You will need to bind the click events to the newly created elements on your page after they have been loaded. Jquery's load method takes a function as a second parameter. It is fired once the load is complete.

jQuery( document ).ready(function() {
    jQuery( ".button" ).click(function() {
        var myUrl = "/url-to-page";
        jQuery( "#target-div" ).load(myUrl, function () {
          // bind events here
        });
    });
});

edit: using event delegation

$(function () {    //shorthand for document ready
    $('#target-div').on('click', '.button', function () {
        $("#target-div").load("/url-to-page");
    });
});

Every .button within #target-div will have the click event bound to it. The click event will also be bound to every .button element added to #target-div . Hope this helped.