Question

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

情况：我正在提供一个通用的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代码。

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

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

Answer 2

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

我的解决方案看起来像这样

<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

看起来像#href链接不起作用。只需照顾好这一点。：）

在AJAX重新加载后重写就绪事件

3 个答案: