jQuery可拖动创建重复子项

Question

我正在使用jQuery UI可拖动功能。 Fiddle

有两节“顶”和“内容”：所以我刚才创建了一个简单的测试方案来解决这里的错误完整的代码是比较复杂的。 “顶部”部分有一个可拖动的黄色按钮。

当我在上面拖动黄色按钮，并将其拖放到灰色“内容”区域，它会在灰色的内容显示此：

黄盒子1 项目1 项目2 项目3 添加新项目（按钮）

当我点击“添加新项目”按钮时，项目3文本下将添加“项目4”文本。 当我再次点击“添加新项目”按钮时，项目4文本中将添加“项目5”文本，依此类推......

它按预期工作。

黄盒子1 项目1 项目2 项目3 ：然而，当我做的黄色按钮拖至另一个顶部，并把它在灰色地带，我都会有这样的问题出现项目4 项目5 添加新项

黄盒子2 项目1 项目2 项目3 添加新项

所以，当我回去我每次点击广告d黄色框1下的新建项目按钮，它为每次点击添加两个新项目而不是一个（它将添加项目5下的项目6和项目7），这不是我想要的。

我试图取消事件冒泡和其他一些事情，但不知何故它不起作用。当我不使用jQuery UI可拖动函数隔离相同的场景时，它的行为如预期。所以我想这个bug与我如何实现可拖动函数有关。感谢您的帮助。

下面是代码：

$(function() { 
    $('#content').sortable({ 
     placeholder: 'ui-state-highlight' 
    }); 

    $(".top-icon").draggable({ 
     connectToSortable: '#content', 
     helper: myHelper, 
     stop: handleDragStop 
    }); 

    function myHelper(event) { 
     return $(this).clone(); 
    } 

    var i = 1; 
    function handleDragStop(event, ui) { 
     var current_text = '<div class="color-box"><b>Yellow Box ' + i + '</b>' 
      + '<div class="yellow-content">' 
      + '<div class="item">Item 1</div>' 
      + '<div class="item">Item 2</div>' 
      + '<div class="item">Item 3</div>' 
      + '<div class="add-item">Add New Item</div>' 
      + '</div>' 
      + '</div>'; 
     $('#content .top-icon').after(current_text); 

     i++; 

     var $new_insert_item = $('#content .top-icon').next(); 
     $('#content .top-icon').remove(); // remove the clone .top-icon inside #content 

     console.log('hi'); 
     // when click on Add New Item button 
     $('.color-box').on('click', '.add-item', function() { 

      var $this = $(this); 
      var item_count = $this.siblings('.item').length + 1; 
      console.log (item_count); 

      var str_item = ''; 
      str_item = '<div class="item">Item ' + item_count + '</div>'; 

      $(str_item).insertBefore($this); 
     }); 
    } 
    // end of handleDragStop 
}); 

Answer 1

问题是，结合的Click事件handleDragStop内结合事件的现有已拖动的项目，以及使现有的拖动项被点击事件加起来1在每次拖动期间。因此，将事件绑定到外部并将事件绑定到#content（如果这是DOM中存在的容器，即使在第一次拖动之前）也将被委派。

$('#content').on('click', '.add-item', function() { 
     var $this = $(this); 
     var item_count = $this.siblings('.item').length + 1; 
     console.log(item_count); 
     var str_item = ''; 
     str_item = '<div class="item">Item ' + item_count + '</div>'; 
     $(str_item).insertBefore($this); 
    }); 

Fiddle