JS动态添加字段 - 删除按钮不工作

Question

问题是，然后我动态添加一些输入字段，应该删除添加的行的点击操作不起作用。我知道点击操作必须使用.on，但它没有帮助。有任何想法吗？

这里是.js文件：

$(document).ready(function() { 

    $('.eventsRowsWrapper').each(function() { 
     var $wrapper = $('.eventsRows', this); 

     $(".addEventButton", $(this)).on('click', function() { 
      //console.log(jsFrontend.data.get('Planning.test')); 
      //$('.multi-event:first-child').clone(true).appendTo($wrapper).find('input').val('').attr('id', ''); 
      $($wrapper).append('<div class="form-group multi-event controls form-inline"> <input name="date[]" maxlength="255" type="text" placeholder="Data" class="datepickerClass form-control sortable ui-sortable" size="20"> <button type="button" style="float: none" class="close deleteEventButton">&times;</button></div>'); 
      $(".datepickerClass").datepicker(); 
      $('.sortable').sortable(); 
     }); 

     $('.multi-event').on('click', '.deleteEventButton', function() { 
       if ($('.multi-event', $wrapper).length > 1){ 
       $(this).parent('.multi-event').remove(); 
      } 
     }); 
    }); 

}); 

和.html：

<div class="eventsRowsWrapper"> 
    <div class="eventsRows sortable"> 
     <div class="form-group multi-event controls form-inline"> 
      <input name="date[]" maxlength="255" type="text" placeholder="Data" class="datepickerClass form-control sortable ui-sortable" size="20"> 
      <button type="button" style="float: none" class="close deleteEventButton">&times;</button> 
     </div> 
    </div> 

    <button class="btn btn-warning btn-sharp addEventButton" type="button" name="addEvent"> 
     <span class="glyphicon glyphicon-plus-sign"></span>Add event 
    </button> 
</div> 

这里是Fiddle。

Answer 1

代替：

$('.multi-event').on('click', '.deleteEventButton', function() { 

写：

$(document).on('click', '.multi-event .deleteEventButton', function() { 

您正在尝试的东西，不会在DOM还存在附加的处理程序。