通过 AJAX 加载页面时 jQuery 不起作用

Question

我有一个加载了 jQuery 的索引页面以及一个用于滑块插件的 js 文件。然后我使用点击事件来使用 .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");
    });
});

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