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

 });

点击进入＆＃34;添加项目＆＃34; jquery用一些html创建新行。然后点击＆＃34;删除项目＆＃34;除第一行外，我需要删除此父.row-wrap。这是JsFiddle link 我的错误在哪里？

Answer 1

即使你使用带有事件委托语法的.on（），它也不能作为动态创建绑定事件的元素。

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

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

在您的情况下，因为您要将动态内容添加到scntDiv元素，您可以将处理程序绑定到该元素，如

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

演示：Fiddle

Onclick添加html内容并通过单击＆＃34;删除＆＃34;删除它。链接

1 个答案: