javascript - 在新的 ajax 加载内容之后刷新 dom 处理程序的最明智的方法是什么?

标签 javascript jquery ajax dom reload

我正在使用图表和其他小部件的大型模板。我还手动实现了一些ajax选项卡。现在,每当这些选项卡加载新内容(图表)时,问题是 head 标记中的所有模板脚本将不再适用于这些 ajax 加载的元素。

我知道,通常您会使用 .live 来解决此类问题,但这意味着要进入整个 50klines-js 模板并将所有内容更改为 .live 调用...实际上无法做到这一点。

是否有一种 jquery 方式来重新加载/重新激活 head-tag 中的所有脚本?

最佳答案

首先.live()早已被弃用,甚至从最新版本的 jQuery 中删除。您永远不应该考虑使用 .live() .

其次,听起来您已经知道,解决此问题的“正确”方法是更改​​代码以使用 .on() 的委托(delegate)形式这就是取代 .live() 的内容。是的,更改所有以错误方式执行此操作的代码。这是a post关于使用 .on() 的委托(delegate)形式而不是.live() .

第三,解决方法是将连接这些事件处理程序的所有初始化代码放入单个函数中(或由单个函数调用)。然后,您可以在初始化时调用该单个函数,然后可以在重新加载内容后随时调用该单个函数。技巧在于,您只能将代码放入可以在内容重新加载后调用或应该多次调用的初始化函数中。如果您将一些不应该放在那里的事件处理程序放在那里,那么您可能会安装重复的事件处理程序。因此,只有适用于替换内容的事件处理程序初始化才应该进入此函数。

假设该函数被调用 initDynamicContent ,那么它可能看起来像这样:

 // init event handlers on the original version of the dynamic content
 $(document).ready(initDynamicContent);

然后,在替换动态内容后的某个时间,您可以执行以下操作:

// code here that replaces the dynamic content with new content
initDynamicContent();

没有神奇的 jQuery 方法可以自动发生这种情况。 jQuery 完全无法知道哪些代码应该再次运行,哪些代码不应该再次运行。

关于javascript - 在新的 ajax 加载内容之后刷新 dom 处理程序的最明智的方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26969644/

相关文章:

javascript - 如何在 Angular 模板中包含外部javascript?

javascript - 是或否单选按钮显示不同的 DIV

javascript - 动画 div...无法让它停止插入所有 div (Magento)

javascript - $.each ajax 请求完成后的 jQuery run 函数

php - 如何在 php(或 codeigniter)中区分 ajax 调用和浏览器请求?

javascript - 通过 Ajax 调用加载元素后,单击事件不起作用

JavaScript noob - 正确使用 window.setInterval() 时遇到问题

javascript - 流沙字体无法正确呈现

javascript - 导航栏中 Bootstrap 标签的正确布局

javascript - 使用 nodejs 读取 css 样式的值