javascript - 通过 AJAX 加载页面时 jQuery 不工作

Question

我有一个索引页面，其中加载了 jQuery 以及 slider 插件的 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 不会在从外部页面加载的元素上触发。例如，我在外部页面上有一些图像(用于 slider 插件)，但 slider 插件不会将它们变成幻灯片，就像我将这些相同的图像(在包装器 div 内)直接放到索引页上一样.

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

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

Answer 1

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

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

编辑:使用事件委托(delegate)

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

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