jquery - 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现在是私有(private)的，不能再直接操作了？

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

提前致谢并致以亲切的问候

Answer 1

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

您可以通过取出完成 ajax 调用后需要运行的代码来避免这种情况，并且您希望元素的数量可能会从您希望重新初始化的事件中受益。

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

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

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

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

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

评论补充

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

<div id="container">

    <div id="ajax-content">

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

    </div>

</div>

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

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

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

    // Your normal onclick code
});