javascript - 动态加载的 div 内容中的 jQuery 工具提示

Question

我有这个工具提示功能(工作正常):

$('.tooltip').jBox('Tooltip', {
   closeOnMouseleave: true,
   ajax: {
      url: 'tooltips/tooltip.jsp',
      reload: true,
      getData: 'data-ajax',
      setContent: true,
      spinner: true
   }
});

然后我有这个功能每十秒加载一个 div 内容(工作正常):

$('#responsecontainer').load('live.jsp');
   var refreshId = setInterval(function() {
      $('#responsecontainer').load('live.jsp');
      }, 30000);
   $.ajaxSetup({ cache: false });
} );

这个链接在任何地方都可以正常工作，除了在动态加载的 div 中。

<a class="tooltip" data-ajax="id=5" href="tooltip.html"Link</a>

有谁知道如何使这个链接在动态加载的 div 的内容中起作用？非常感谢

Answer 1

jBox 附带一个 attach() 方法:https://stephanwagner.me/jBox/methods#attaching-jbox

您应该使用此方法附加您的 jBox 并将您的 jBox 放在一个变量中:

var myJBox = new jBox('Tooltip', {
   closeOnMouseleave: true,
   attach: '.tooltip',
   ajax: {
      url: 'tooltips/tooltip.jsp',
      reload: true,
      getData: 'data-ajax',
      setContent: true,
      spinner: true
   }
});

然后您可以随时使用 myJBox.attach() 重新附加 jBox:

$('#responsecontainer').load('live.jsp', function () { myJBox.attach(); });
   var refreshId = setInterval(function() {
      $('#responsecontainer').load('live.jsp', function () { myJBox.attach(); });
   }, 30000);
   $.ajaxSetup({ cache: false });
} );

这样你就可以确保 jBox 不会多次将自己附加到一个元素上。