Wie überprüft man nach dem Anhängen die Existenz eines Elements?

Question

Das folgende Skript soll ein Element anhängen. Ich überprüfe zuerst, ob das Element existiert, wenn nicht, erstelle ich es und füge es an. Das Problem ist, dass die Überprüfung aus irgendeinem Grund nicht zu funktionieren scheint, es das Element immer und immer wieder zu erstellen ...

Frage: Wie nach der Existenz eines Elements nach dem Anhängen prüfen?

mein jsfiddle:

https://jsfiddle.net/mr54fbrL/

$(document).on("click", ".multilevel p.level", function(e) { 

    var box = $(this).next(".itemMenuBox"); // box you want to interact with 

    // if box does not exist, add it! 
    if(!box.length) { 
     alert('not found, add it!'); 

     var box = $("<div></div>") 
      .attr("class", 'itemMenuBox').text('new box') 
      .appendTo($(this)); 
    } else { 
     alert('found box'); 
    } 
}); 

Answer 1

verwenden Js:

$(document).on("click", ".multilevel p.level", function(e) { 
     if($(this).find('div').hasClass('itemMenuBox')){ 
      alert('found box'); 
     }else{ 
       alert('not found, add it!'); 
      var box = $("<div></div>") 
       .attr("class", 'itemMenuBox').text('new box') 
       .appendTo($(this)); 
     }  
    });