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

Question

我有一个加载了jQuery的索引页面以及一个滑块插件的js文件。然后我使用on click事件来使用.load来加载外部页面，如下所示：

//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);
    });
});

这会成功将外部页面加载到#target-div中，但索引页面上加载的jQuery不会触发从外部页面加载的元素。例如，我在外部页面上有一些图像（用于滑块插件），但是滑块插件不会将它们变成幻灯片，就像我将这些相同的图像（在包装器div中）直接放到索引页面上一样

外部页面没有任何html，head或body标签 - 只有我想加载的内容包含在某些div中。

有没有人知道让jQuery在外部加载页面上工作的“技巧”？

Answer 1

问题是您的点击事件已被绑定。在加载后，您需要将点击事件绑定到页面上新创建的元素。 Jquery的load方法将函数作为第二个参数。一旦负载完成就会被触发。

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

编辑：使用事件委派

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

.button中的每个#target-div都会绑定click个事件。点击事件也将绑定到添加到.button的每个#target-div元素。希望这有帮助。