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

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

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

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

我刚刚测试过:

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

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

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

我喜欢做这个post中建议的事情:

触发$ document.ready(所以我执行的AJAX代码无法修改)

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

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

在此先感谢并亲切的问候

您不应该尝试重新加载整个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并使用它的冒泡function,这就是我将如何处理这类问题。 它避免了您不得不考虑在脚本中“重新初始化”DOM ready函数的任何部分。

补充评论

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

  

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

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

 $('#container').on('click', '.created-link', function(event) { event.preventDefault(); // Your normal onclick code }); 

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

  • 从这个主题来看David Barker的回答
  • 从另一个主题来看,尼克杨的答案

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

  

希望这有助于某人

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