Question

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

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

我正在使用一个基于Bootstrap和其他库的一些精心设计的管理主题来设置应用程序的样式。我把所有的css和js引用放在父页面中，在子页面中我只使用没有引用css或js的类。

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

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

我猜测它不起作用的原因是，当孩子装载时没有任何东西告诉系统＆＃39;连接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样式都有效，但点击处理程序不起作用。

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

当我只引用父级的js文件时，如何在动态加载页面后将click事件设置为连接？

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

如何在动态加载的页面

1 个答案: