無法刪除的Jquery使用嵌套按鈕

Question

我有一些jQuery代碼中插入一個div像這樣

function popUpBox(){ 
$(".openBox").click(function(){  
    var id = $(this).attr('id'); 
    $("#"+id).append('<div class="box1"><div class="button1">Submit</div></div>'); 
    closeBox(); 
}); 
} 

function closeBox(){ 
    $(".button1").click(function(){ 
      $(".box1").remove(); 
    }); 
} 

功能popUpBox被稱爲上的document.ready插入DIV。當然，我有這樣一個div ...

<div class="openBox" id="id1">Open Box</div> 

的closeBox（）函數似乎沒有刪除（）事件將按鈕綁定。我試圖使用綁定和parent.remove但無濟於事。

Answer 1

您的代碼有效。問題是點擊Submit按鈕也會觸發父事件處理程序。所以你要刪除彈出框，但立即再次添加一個。

防止由stopping the event from bubbling up觸發父事件處理程序：

function closeBox(){ 
    $(".button1").click(function(e){ 
      e.stopPropagation(); 
      $(".box1").remove(); 
    }); 
} 

quirksmode.org has a great article about this。

DEMO

這就是說，而不是再次每次結合事件處理程序，你可以一次綁定，並使用事件委派：

function popUpBox(){ 
    $(".openBox").click(function(){  
     $(this).append('<div class="box1"><div class="button1">Submit</div></div>'); 

    }).on('click', '.button1', function(e) { 
     e.stopImmediatePropagation(); 
     $(this).closest('.box1').remove(); 
    }); 
} 

DEMO