Question

我有一个网站，包含无限页面和动态加载的内容。

目前我使用的是jQuery tipsy插件，需要在任何动态添加内容到网站的功能中调用它（以获取此新内容的工具提示）。我目前正在将我的绑定更改为ons，这将有助于实现点击和其他事件。

我现在的代码，重复了很多：

   $("[data-tooltip]").tipsy({settings here});

是否可以使用jQuery ON，并将其绑定到正文，如果将内容添加到正文中，则内容（如果它具有[data-tooltip]属性）将自动执行tipsy函数？

例如：

 $("body").on("something","[data-tooltip]", function (e) { 
         $("[data-tooltip]").tipsy({settings here}); 
 });

由于

Answer 1

您可能知道，在每次新内容加载后，实际上只需应用tipsy会更好：

$.ajax({
   ..
   success: function( newHtml ) {
       $('#container').append( newHtml );
       $('#container .tipsy').tipsy({
           /** Your settings **/
       });
   }
});

实现你所要求的;你必须申请某种“倾听者”。等待插入的任何新DOM元素，以其原始基本形式：

function listenForNewToolTips() {
    $('.someclass[data-tooltip]:not([data-hastipsy])').tipsy({ 
           /** Apply data-hastipsy='true' **/ 
    });
    //Look again in 1000 milliseconds.
    setTimeout( listenForNewToolTips, 1000 );
}

上面的内容非常不足，因为它是一个恒定的循环。 on听取了很多事件，但令人惊讶的是，没有很多事件可以监听每个DOM元素的变化：

Mutation Observers（新的非跨浏览器）
DOMNodeInserted（已弃用）
setTimeout()

将jQuery tipsy与jQuery ON集成

1 个答案: