Question

我有一个动态显示（或至少是计划）内容的网站，但它有一些问题。当我第一次打开网站并单击链接时，它会动态加载内容。当我再次返回并再次按下链接时，它会重新加载整个站点。我觉得我错过了一些重要的东西，它会是什么？

的Ajax：

$(document).ready(function () {
    var container = $('#content');

    $('a').click(function (e) {
        e.preventDefault();
        var url = $(this).attr('href');
        //$('#content').hide('fast');
        history.pushState({path: url}, null, url);
        container.load(url);
        return false;
    });

    $(window).bind('popstate', function (event) {
        var state = event.originalEvent.state;

        if (state) {
            container.load(state.path);
        }
    });

    history.replaceState({path: window.location.href}, '');
});

Answer 1

这是因为您替换了内容，并且链接不再绑定到您添加的事件。您需要重新绑定事件或使用事件委派。

因此，事件委派的解决方案是替换

$('a').click(function (e) {

与

container.on("click", "a", function (e) {

Answer 2

第一次加载页面时，jQuery会将“click”功能绑定到a元素。但是，动态内容是在jQuery完成绑定后加载的。由于动态部分中的a标记在原始文档加载中不存在，因此jQuery代码不会应用于它们。

要解决此问题，请使用on。如：

 $('a').on('click', function (e) { ...

这是一个更动态的绑定。它不是绑定到加载页面时存在的a标记，而是将操作绑定到任何长期出现的a标记。

在某些情况下，我也看到你必须在$(document).ready()函数之外移动此绑定。

希望有所帮助。

第二次按下时，链接不会动态加载内容

2 个答案: