如何用 $(document).on() 替换 $(document).ready()

Question

我是 JQuery 的新手。我正在使用 this JQuery 函数来显示元素的工具提示。

我根据自己的需要（在这个社区的帮助下）以这种方式编辑了代码：

$(document).ready(function() {  
   $('.toolTipField').each(function() {
     $(this).tooltipster({
         content: $('<span>' + $(this).attr("data-tooltipText") + '</span>')
     });
   });
});

我还需要在使用此 JQuery 函数添加到 DOM 的元素上显示工具提示：

$("#element").clone().appendTo("#target")

现在，工具提示不适用于使用 JQuery 添加到 DOM 的元素。查看互联网我发现我必须使用方法 on() 而不是 ready()，但我不知道如何正确编辑我的代码。

谢谢大家

Answer 1

var myClone = $('el').clone(); 
myClone.appendTo('target'); 
myClone.tooltipster({....});

Answer 2

jQuery 为您提供当时存在的元素，而不是您稍后添加的元素。如果添加它们，则还必须添加工具提示

Answer 3

事件委托不能解决你的问题。它不会动态检测元素何时添加到文档中。您需要手动调用代码来添加您的工具提示。最好的办法是分解代码，使其可重用，而不是在准备就绪时和克隆元素时调用方法。

function addToolTips (elems) {
   elems.each(function() {
     $(this).tooltipster({
         content: $('<span>' + $(this).attr("data-tooltipText") + '</span>')
     });
   });
}


$(document).ready(function() {  
   addToolTips($('.toolTipField'))
});

当您克隆元素时

var clonedElem = $("#element").clone().appendTo("#target");
addToolTips(clonedElem);

如何用 $(document).on() 替换 $(document).ready()

How to replace $(document).ready() with $(document).on()

jquery

dom

clone