如何在追加後檢查元素的存在？

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)); 
     }  
    });