Onclick添加html内容并通过点击“删除”链接将其删除

Question

我有一些问题，请帮我找出错误在哪里。

$(document).ready(function(){ 
    $(function() { 
    var scntDiv = $('#p_scents'); 
    var i = $('#p_scents .row-wrap').size() + 1; 

    $('body').on('click', '.add-item', function() { 
      $('<div class="row-wrap cf"><div class="col-md-3 col-sm-3 col-xs-12"><input type="text" placeholder="Наименование" name="item_name' + i +'"></div><div class="col-md-2 col-sm-2 col-xs-12"><input type="text" placeholder="Количество" name="item_count' + i +'"></div><div class="col-md-6 col-sm-6 col-xs-12"><input type="text" placeholder="Требования" name="item_demand' + i +'"></div><div class="col-md-1 col-sm-1 col-xs-12"><a href="#" class="delete-item">delete</a></div></div>').appendTo(scntDiv); 
      i++; 
      return false; 
    }); 

    $('.col-md-1').on('click', '.delete-item', function() { 
     event.preventDefault(); 
      if(i > 2) { 
        $(this).parents('.row-wrap').remove(); 
        i--; 
      } 
      return false; 
    }); 
}); 

}); 

点击“add-item”jquery用一些html创建新行。并通过点击“删除项目”我需要删除此父母.row-wrap第一行除外。 这里是JsFiddle link 我的错误在哪里？

Answer 1

即使您正在使用带事件委托语法的.on（），它也不起作用，因为绑定事件的元素是动态创建的。

您正在注册的处理程序为col-md-1，它是删除按钮的父级，但该元素也是动态创建的，因此当您说$('.col-md-1').on('click',...)时，处理程序不会添加到任何元素。

要使用事件委托，应将处理程序添加到动态元素选择器作为第二个参数的预先存在的元素（动态元素的祖先）。

在你的情况，因为你要添加动态内容到scntDiv元素，你可以处理程序绑定到元素像

 scntDiv.on('click', '.delete-item', function() { 
      event.preventDefault(); 
      if (i > 2) { 
       $(this).parents('.row-wrap').remove(); 
       i--; 
      } 
      return false; 
     }); 

演示：Fiddle