jQuery AJAX 重新加载后重新触发就绪事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12235800/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Refire ready event after AJAX reload
提问by arvgta
I've researched other threads and am just confused.
我研究了其他线程，只是感到困惑。
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 插件，它加载用户通过 AJAX 动态指定的 div。一切正常，但在例如一个用户的页面上，有一段 JS 没有被调用，因为“就绪”事件没有被重新触发。
The usual situation will be that the user's other jQuery stuff will be placed after jQuery(document).ready.
通常的情况是用户的其他 jQuery 东西会放在 jQuery(document).ready 之后。
I've just tested calling:
我刚刚测试了调用：
$(document).trigger('ready');
manually - it has no effects at all, as I presume that "ready" is called only once and only once.
手动 - 它根本没有任何影响，因为我认为“ready”只被调用一次并且只被调用一次。
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:
我很乐意做类似在这个线程中建议的事情：
Trigger $document.ready (so AJAX code I can't modify is executed)
触发 $document.ready（所以我无法修改的 AJAX 代码被执行）
But I think that readyList is now private and can't be manipulated directly anymore?
但我认为 readyList 现在是私有的，不能再直接操作了？
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.
值得一提的是，我提供的插件为用户提供了回调功能。当然，他可以在那里放置加载后处理 JS 代码。
Thanks in advance and kind regards
提前致谢并致以亲切的问候
回答by David Barker
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.
您不应该尝试重新加载整个 DOM 就绪函数。特别有害的是事件的 n+n 性质，例如，如果 DOM 就绪函数被它们反复重新触发，则同一元素上的 2 个单击事件可能会变成 4，然后是 8 等。
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.
您可以通过删除完成 ajax 调用后需要运行的代码来避免这种情况，并且大概您希望元素的数量将从您希望重新初始化的事件中受益。
$(document).ready(function()
{
initialise();
//... Resume with DOM ready
});
function initialise()
{
// create event here that needs re-initialising
}
So when you're done with your ajax call just call initialise()again.
因此，当您完成 ajax 调用后，只需initialise()再次调用即可。
Alternatively look to using .onand 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和使用它的冒泡功能，这就是我处理此类问题的方式。它避免了您必须考虑“重新初始化”脚本中 DOM 就绪函数的任何部分。
Additional from comments
来自评论的补充
.onallows 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.
.on允许您将事件绑定到页面上任何时候都不会更改的低级元素，同时允许您控制哪些动态元素实际触发该容器内的事件。
<div id="container">
<div id="ajax-content">
<a href="#" class="created-link">A new link</a>
</div>
</div>
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.
所以我们知道<a>是在 DOM 就绪事件被触发后由 ajax 函数创建的，因此任何直接应用于它的事件都将不起作用。
Instead we would bind the event to a lower level unchanged element and bubble up to the containing dynamic DOM element.
相反，我们会将事件绑定到较低级别的未更改元素并向上冒泡到包含动态 DOM 元素。
$('#container').on('click', '.created-link', function(event)
{
event.preventDefault();
// Your normal onclick code
});
回答by Matija Kraljic
just to share my findings and solution, I had the same problem that after an AJAX reload the $(document).ready function is not called for this problem i have used combinations of this two answers, and in the end found a very simple solution
只是为了分享我的发现和解决方案，我遇到了同样的问题，在 AJAX 重新加载 $(document).ready 函数之后，这个问题没有被调用，我使用了这两个答案的组合，最后找到了一个非常简单的解决方案
My solution looks like this
我的解决方案看起来像这样
<script type="text/javascript">
function initialise(){
$('.clickableItem').click(function(){
/* do code here */
return false;
});
};
$(document).ready(function(){
initialise();
});
$(document).ajaxComplete(function () {
initialise();
});
</script>
hope this helps someone
希望这有助于某人
回答by Arnaud Janssens
It look likes that link with # as href are not working. Just take care of this. :)
看起来带有 # as href 的链接不起作用。只要照顾好这个。:)
