javascript - 如何在动态加载的页面中强制从 js 中点击 html 元素

Question

希望我能想出一个更好的方式来表达这个问题......

使用 JQuery.Ajax 在一个简单的 Web 应用程序中动态加载内容，顶部有一个静态导航栏，下面有一个内容区域。当用户单击导航栏上的按钮时，我使用 ajax 将请求页面的 html 加载到内容 div 中。效果很好。

我正在使用基于 Bootstrap 和其他库的稍微复杂的管理主题来设置应用程序的样式。我将所有的 css 和 js 引用放在父页面中，在子页面中我只使用类而不引用 css 或 js。

当加载 html 子级时，它会根据父级引用的 css 正确呈现，这对我来说很有意义，因为在加载后它实际上是父级页面的一部分，因此它可以访问父级中的所有内容.

我的问题是在 js 文件中定义的点击处理程序没有附加到元素。我可以在 chrome 中使用 F12 确认这一点。但是，如果我在子项中放置对 js 的引用，那么点击处理程序就会连接起来并且工作正常。

我猜它不起作用的原因是当 child 被加载时，没有任何东西告诉“系统”连接 js 文件中定义的事件。

这是子页面中的 html:

<a href="#" class="btn btn-mini content-refresh">
<i class="fa fa-refresh"></i>
</a>

这是在父页面中引用的 js 函数(它是一个什么都不做的虚拟函数):

$(".content-refresh").click(function (e) {
    alert('refresh');
    e.preventDefault();
    var $el = $(this);
    $el.find("i").addClass("icon-spin");
    setTimeout(function () {
        $el.find("i").removeClass("icon-spin");
    }, 2000);
});

如前所述，当我在子项中包含 js 时，它工作得很好，当仅在父项中引用时，所有 css 样式都有效，但点击处理程序无效。

我不知道在 child 中包含 js 是否有缺点，也许这是唯一的解决方案。由于资源已经加载，我假设浏览器不会再次加载它，但是可能有 js 文件，我想在父级中只引用一次它们是可能的。

当我只引用父级上的js文件时，如何在动态加载页面后让点击事件连接起来？

Answer 1

$( selector ).live( events, data, handler );                // jQuery 1.3+
$( document ).delegate( selector, events, data, handler );  // jQuery 1.4.3+
$( document ).on( events, selector, data, handler );        // jQuery 1.7+

现在和将来为元素附加事件处理程序。 你可以使用。

$(document).on("click", ".content-refresh", function (e) {
    alert('refresh');
    e.preventDefault();
    var $el = $(this);
    $el.find("i").addClass("icon-spin");
    setTimeout(function () {
        $el.find("i").removeClass("icon-spin");
    }, 2000);
});