重新加载AJAX后重新触发就绪事件 [英] Refire ready event after AJAX reload

问题描述

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

I've researched other threads and am just confused.

情况:我正在提供一个通用的jQuery插件，该插件可加载用户通过AJAX动态指定的div.一切正常，但在在一个用户页面上，有一个未调用的JS，因为"ready"事件没有被触发.

Situation: I'm supplying a generic jQuery plugin that loads the div the user specifies dynamically via AJAX. Everything works fine, but on e.g. one user's page, there is a piece of JS that is not called, because the "ready" event is not refired.

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

The usual situation will be that the user's other jQuery stuff will be placed after jQuery(document).ready.

我刚刚测试了呼叫:

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

手动-它根本没有任何作用，因为我认为就绪"仅被调用一次，也只能被调用一次.

manually - it has no effects at all, as I presume that "ready" is called only once and only once.

处理它的正确方法是什么? (最好提供最通用的解决方案)

What is the proper way to handle it? (it would be great to provide the most generic solution possible)

我很乐意做这个线程中建议的事情:

I'd love to do something like suggested in this thread:

触发$ document.ready (因此执行了我无法修改的AJAX代码)

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

But I think that readyList is now private and can't be manipulated directly anymore?

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

It's worth mentioning, that the plugin I'm providing supplies a callback functionality for the user. Of course, (s)he could place post-loading handling JS code in there.

预先感谢和亲切问候

推荐答案

您不应尝试重新加载整个DOM ready函数.如果您这样做，则事件的n + n性质尤其有害，例如，如果相同元素重复触发DOM ready函数，则同一元素上的2次单击事件可能会变成4次，然后变为8次.

You shouldn't attempt to reload the entire DOM ready function. Particularly harmful is the n+n nature of events if you did, 2 click events on the same element for example could potentially become 4, then 8 etc. if the DOM ready function is repeatedly re-fired by them.

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

You can avoid this by taking out the code that you need to run once you're done with your ajax call and presumably the population of the element that you're hoping would benefit from the event you wish to re-initialise.

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

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

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

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

So when you're done with your ajax call just call initialise() again.

或者考虑使用.on并使用它的冒泡功能，这就是我处理此类问题的方式.它避免了您不得不考虑在脚本中重新初始化" DOM ready函数的任何部分.

Alternatively look to using .on and using it's bubbling up capabilities, this is how I would handle this kind of problem. It avoids you having to ever think about 're-initialising' any part of the DOM ready functions in your scripts.

评论中的其他内容

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

.on allows you to bind events to low level elements on the page that do not change at any time, whilst allowing you to control which of the dynamic elements actually trigger the event within that container.

<div id="container">

    <div id="ajax-content">

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

    </div>

</div>

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

So we know that the <a> is created by an ajax function after the DOM ready event is fired, therefore any direct events applied to it then would not work.

相反，我们将事件绑定到一个较低级别的，未更改的元素，然后冒泡直到包含动态DOM元素.

Instead we would bind the event to a lower level unchanged element and bubble up to the containing dynamic DOM element.

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

    // Your normal onclick code
});

这篇关于重新加载AJAX后重新触发就绪事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！