jQuery：如何檢查一個元素是否動態添加？

Question

我有一個小工具提示。在一些地方，它被動態添加到頁面上。在其他情況下，它從一開始就存在。

因爲像$("mytooltip").mouseover(...)不會爲動態添加我必須使用像$("body").on("mouseover, ".mytooltip", function(){...})

我擔心元素然而工作與第二個解決方案，它會嘗試每一個我將時間以觸發功能鼠標在body上，效率非常低（對吧？）。

我在想也許我可以在我動態添加工具提示時觸發某種自定義事件。這樣，如果事件被解僱，我們切換到$("body").on("mouseover", .....);，否則，我們將使用普通的$(".mytooltip").mouseover。

因此，像：

if(...){//Event was fired - i.e. we've added the tooltip dynamically 
     $("body").on("mouseover", ".mytooltip", function(){ 
      mouseOverFunc(); 
     }); 
     $("body").on("mouseout", ".mytooltip", function(){ 
      mouseOutFunc(); 
     }); 
    }else{ 
     $(".mytooltip").mouseover(function(){ 
      mouseOverFunc(); 
     }); 
     $(".mytooltip").mouseout(function(){ 
      mouseOutFunc(); 
     }); 

    } 

的問題是，我不知道如何來檢測，如果事件被解僱或不....

PS - 獎金的問題：是什麼我做得合理嗎？還是我太過分了，應該只爲$("body").on("mouseover")做一切？

Answer 1

如果動態添加HTML，你需要在Ajax調用之後，而不是執行JavaScript的DOM

$.ajax{ 
    //do something 
    $(div).html(code); 
    if(...){//Event was fired - i.e. we've added the tooltip dynamically 
     $("body").on("mouseover", ".mytooltip", function(){ 
      mouseOverFunc(); 
     }); 
     $("body").on("mouseout", ".mytooltip", function(){ 
      mouseOutFunc(); 
     }); 
    }else{ 
     $(".mytooltip").mouseover(function(){ 
      mouseOverFunc(); 
     }); 
     $(".mytooltip").mouseout(function(){ 
      mouseOutFunc(); 
     }); 
    } 
}