追加の後に要素の存在を確認する方法は？

Question

次のスクリプトは、要素を追加することになっています。私は最初に要素が存在するかどうかをチェックし、作成しない場合は追加します。問題は何らかの理由で検査がうまく行かないように見えても、何度も何度も要素を作成し続けることです...

質問：追加後に要素の存在を確認するにはどうすればよいですか？

私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

これを使用して、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)); 
     }  
    });