jquery - 如何用 $(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

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

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);