javascript - 重新创建时 jQuery 对象不可拖动

Question

请访问http://classrecon.com/invest/mockup.html以我的问题为例。要重现问题:

1. 拖动PULM进入“有这些目标...”字段并放下。
2. 点击标签右侧的 X 可删除该标签。
3. 问题:请注意，当您尝试拖动 <delete element's text> 时该元素不会拖动。

如何使新标签可拖动？如何将已删除标签的文本转移到新标签？

JS:

$(function(){
    $(".drag-key").draggable();
    $(".tag-collection").droppable({
        over: function(event, ui){
            $(this).css("background-color","rgba(0,191,255,.3)");
        },
        out: function(event, ui){
            $(this).css("background-color","white");
        },
        drop: function(event, ui){
            $("<div class='key'></div>").text( ui.draggable.text() ).appendTo( this ).append(" <span class='remove'>✘</span>");
            ui.draggable.remove();
        }
    });

    // I THINK THE PROBLEM IS HERE
    $(document).on('click', 'span.remove', function() {
        $(".key-rep").append("<div class=\"drag-key key\">&lt;removed element's text&gt;</div>");
        $(this).closest('.key').hide();
    });
});

Answer 1

您需要在 $(document).on('click', ' 末尾再次运行 $(".drag-key").draggable(); 行span.remove', function() {

应该是这样的

$(document).on('click', 'span.remove', function() {
        $(".key-rep").append("<div class=\"drag-key key\">&lt;removed element's text&gt;</div>");
        $(this).closest('.key').hide();
        $(".drag-key").draggable();
    });

这是一个带有建议修复的 JSFiddle

JSFiddle