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 динамически вам необходимо выполнить JavaScript после вызова Ajax вместо того, чтобы в 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(); 
     }); 
    } 
}