AJAX 重新加载后重新触发就绪事件

Question

我研究了其他线程，只是感到困惑。

情况：我提供了一个通用的 jQuery 插件，它加载用户通过 AJAX 动态指定的 div。一切正常，但在例如一个用户的页面，有一段JS没有被调用，因为“ready”事件没有重新触发。

通常的情况是用户的其他 jQuery 东西会放在 jQuery(document).ready 之后。

我刚刚测试了调用：

$(document).trigger('ready');

手动 - 它根本没有任何效果，因为我认为“ready”只会被调用一次且只有一次。

处理它的正确方法是什么？ （最好能提供最通用的解决方案）

我很乐意做一些类似这个帖子中建议的事情：

Trigger $document.ready (so AJAX code I can't modify is executed)

但我认为readyList现在是私有的，不能再直接操作了？

值得一提的是，我提供的插件为用户提供了回调功能。当然，（s）他可以在其中放置加载后处理的JS代码。

提前致谢和亲切的问候

Answer 1

您不应尝试重新加载整个 DOM 就绪函数。特别有害的是事件的 n+n 特性，如果您这样做了，例如，同一元素上的 2 次点击事件可能会变成 4 次，然后是 8 次等等。如果它们反复重新触发 DOM 就绪功能。

您可以通过删除在完成 ajax 调用后需要运行的代码以及您希望从您希望重新初始化的事件中受益的元素的数量来避免这种情况。

$(document).ready(function()
{
    initialise();

    //... Resume with DOM ready
});

function initialise()
{
    // create event here that needs re-initialising
}

因此，当您完成 ajax 调用后，只需再次调用 initialise()。

或者考虑使用.on 并使用它的冒泡功能，这就是我处理这类问题的方法。它避免了您必须考虑“重新初始化”脚本中 DOM 就绪函数的任何部分。

来自 cmets 的补充

.on 允许您将事件绑定到页面上不会随时更改的低级别元素，同时允许您控制哪些动态元素实际触发该容器内的事件。

<div id="container">

    <div id="ajax-content">

        <a href="#" class="created-link">A new link</a>

    </div>

</div>

所以我们知道<a> 是在触发 DOM 就绪事件后由 ajax 函数创建的，因此应用到它的任何直接事件都将不起作用。

相反，我们会将事件绑定到较低级别的未更改元素并冒泡到包含的动态 DOM 元素。

$('#container').on('click', '.created-link', function(event)
{
    event.preventDefault();

    // Your normal onclick code
});

Answer 2

只是为了分享我的发现和解决方案，我遇到了同样的问题，在 AJAX 重新加载后 $(document).ready 函数没有被调用 对于这个问题，我使用了这两个答案的组合，最后找到了一个非常简单的解决方案

• from this thread the answer from David Barker
• from another thread the answer from Nick Young

我的解决方案是这样的

<script type="text/javascript">
function initialise(){
    $('.clickableItem').click(function(){
        /* do code here */
        return false;
    });
};
$(document).ready(function(){
    initialise();
});
$(document).ajaxComplete(function () {
    initialise();
});
</script>

希望这对某人有所帮助

Answer 3

看起来带有# as href 的链接不起作用。只要照顾好这个。 :)