如何将 jquery 函数应用于 ajax 加载的内容答案

【问题标题】：how to apply jquery functions to ajax loaded content如何将 jquery 函数应用于 ajax 加载的内容
【发布时间】：2014-10-07 00:48:52
【问题描述】：

我正在使用 tooltipster 插件来创建工具提示。当页面打开时，我想应用插件的一些内容是通过 AJAX 加载的。

我尝试过使用

jQuery(window).on("load", function(){
$('.tip1').tooltipster();
});

但它似乎只在主页内容上应用该功能，而不是在 ajax 加载的内容上。

这确实有效：

$(document).on('ready ajaxComplete', function() {
$('.tip1').tooltipster();
});

但是如果通过 AJAX 重新加载内容似乎会导致错误。我在控制台中看到很多这样的警告：

Tooltipster：一个或多个工具提示已附加到此元素：忽略。使用“多个”选项附加更多工具提示

什么是让它工作的最佳方法？

编辑：外部内容是这样加载的：

<script type="text/javascript">
$(document).ready(function() {
url = "source_url.php";
target= ".holder";
$(target).load(url);
});
</script>
<div class="holder"></div>

【问题讨论】：

请添加您如何加载和附加 ajax 加载的内容的代码
他们在iamceege.github.io/tooltipster/#functionBeforeExample中描述了如何实现这一目标

标签： javascript jquery ajax

【解决方案1】：

$(document).ready(function() {
  url = "source_url.php";
  target= ".holder";
  $(target).load(url, function() { $('.tip1', $(this)).tooltipster(); });
});

【讨论】：

我试过了，但不幸的是它似乎没有做任何事情......工具提示没有应用于 ajax 加载的内容......

【解决方案2】：

首先，将插件应用于通过 AJAX 加载的内容的正确方法是在 AJAX 调用中添加回调函数。我不知道您如何附加通过 AJAX 加载的内容，但例如，如果您查看 $.load 的 jQuery 文档，您可以添加一个应该是函数的“完整”参数。当 ajax 请求完成时将调用此函数。它看起来像这样：

$(element).load('content.html', function() {
    $('.tip1').tooltipster();
});

现在，我从未使用过 Tooltipster，但它说它已经附加，肯定有一种方法可以将它与内容分离并重新附加。快速浏览一下它的文档，里面有一个销毁方法

$(...).tooltipster('destroy');

这意味着您可以在将插件重新应用到您的内容之前调用 destroy 方法。使用与回调函数相同的 ajax 代码，它会给你这样的东西：

$(element).load('content.html', function() {
    $('.tip1').tooltipster('destroy').tooltipster();
});

我实际上并没有测试此代码，但这应该对您有所帮助。

【讨论】：

好主意，但现在我收到此错误“您在未初始化的元素上调用了 Tooltipster 的“销毁”方法”...我尝试将对 tooltipster 的原始调用移动到页面的头部（最初在底部）但得到同样的错误......

【解决方案3】：

作为替代方案，您可以使用DOMNodeInserted 事件，但此事件将被删除，并且不确定是否支持跨浏览器。

$('body').on('DOMNodeInserted', '.tip1', function(e) {
  $(e.target).tooltipster();
});

【讨论】：