jQuery可拖动创建了重复的子项

Question

我正在使用jQuery UI draggable函数。代码比较复杂，所以我在这里创建了一个简单的测试场景来排除错误：Fiddle 有两个部分：“top”和“content”。在“top”部分有一个可以拖动的黄色按钮。

当我将顶部的黄色按钮拖到灰色的“content”区域并释放时，它会在灰色内容中显示：

Yellow Box 1 Item 1 Item 2 Item 3 Add New Item（按钮）

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

这正如预期的那样工作。然而，当我再次将黄色按钮拖到灰色区域时，就会出现问题，我将得到以下结果：

Yellow Box 1 Item 1 Item 2 Item 3 Item 4 Item 5 Add New Item

Yellow Box 2 Item 1 Item 2 Item 3 Add New Item

因此，每当我返回并单击Yellow Box 1下面的“添加新项”按钮时，它会添加两个新项，而不是我想要的一个（它将在Item 5下添加Item 6和Item 7），这不是我想要的。

我尝试取消事件冒泡和其他一些事情，但不知何故它没有起作用。当我隔离同样的场景而不使用jQuery UI draggable函数时，它的行为就像预期的那样。因此，我想这个问题与我实现可拖动功能的方式有关。谢谢你的帮助。

以下是代码：

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

- Rachel Smiths

---

你能把它放到 jsfiddle 上吗？这样会更容易解决问题。 - Paul Nikonowicz

它已经包含在第一段中：http://jsfiddle.net/TpUx5/ - Rachel Smiths

Answer 1

问题在于，在handleDragStop内部绑定click事件将事件绑定到已经拖动的项目，因此每次拖动时现有的拖动项目都会增加1个click事件。因此，应该在外部绑定事件，并将事件绑定到#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

- PSL

---

嗨，PSL。我有另一个与此相关的问题，想知道你是否能帮忙：http://stackoverflow.com/questions/22463617/apply-double-click-on-draggable-items。谢谢。 - Rachel Smiths