使用JQuery删除动态创建的Div的问题

Question

我有一个删除它所包含的div的按钮。使用Jquery动态创建div，我用它来删除每个div：

$('.shift_button').click(function(e) {
    e.preventDefault();
    $(this).parent().remove();
});

然而，当按下按钮时，没有任何反应，div仍然存在。知道我做错了吗？

以下是div的创建方式：

$('#shifts_to_complete').append('<div id="'+ length +'" class="current_shift" data-role="fieldcontain"></div>');  
$('#'+ length +'').html('Location: ' + obj.shift_location + '<br>Date: ' + obj.shift_date + '<br>Shift Starts: ' + obj.start_time + '<br>Shift Ends: ' + obj.end_time + '<br>Hours Worked: ' + obj.duration + '<br>Pay for Shift: &pound' + shift_pay + '<br><button class="shift_button ui-btn ui-shadow ui-btn-corner-all ui-btn-up-b" id="btn_'+ length +'">Completed?</button>');

由于

Answer 1

使用event delegation：

$(document).on('click','.shift_button',function(e) 
{ 
 e.preventDefault(); 
  $(this).parent().remove(); 
});

它会将事件绑定到文档的所有未来动态元素，因为document是始终存在的父元素。