Question

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

我尝试使用

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

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

这项工作：

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

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

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

了解这项工作的最佳方式是什么？

编辑：外部内容加载如下：

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

Answer 1

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

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

现在，我从来没有使用过Tooltipster，但是它说它已经附加了，确实有一种方法可以将它从内容中分离并再次重新附加。快速查看它的doc是一种破坏方法

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

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

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

我没有真正测试过这段代码，但这应该可以帮到你。

Answer 2

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

Answer 3

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

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

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

3 个答案: