jquery – 在AJAX重新加载后重放就绪事件

我研究了其他线程,我只是感到困惑.

情况：我正在提供一个通用的jQuery插件,用于加载用户通过AJAX动态指定的div.一切正常,但在例如一个用户的页面,有一块未被调用的JS,因为“ready”事件没有被激活.

通常情况是用户的其他jQuery内容将放在jQuery(document).ready之后.

我刚刚测试过：

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

手动 – 它完全没有效果,因为我认为“就绪”只被调用一次而且只被调用一次.

处理它的正确方法是什么？
(提供最通用的解决方案会很棒)

我喜欢做这个帖子中建议的事情：

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

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

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

在此先感谢并亲切的问候

解决方法

您不应该尝试重新加载整个DOM就绪函数.特别有害的是事件的本质,如果你这样做,在同一元素上的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 ready函数的任何部分.

补充评论

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

<div id="container">

    <div id="ajax-content">

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

    </div>

</div>

所以我们知道< a>在触发DOM ready事件之后由ajax函数创建,因此应用于它的任何直接事件都将无效.

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

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

    // Your normal onclick code
});

原文地址：https://www.jb51.cc/jquery/178953.html