Jquery-ui拖放。删除的列表包含无法编辑的动态创建的文本框

Question

动态创建的文本框在JQuery UI中不可编辑。使用的拖放选项删除项目时添加了文本框和项目。但是文本框不可编辑。 文本框在Firefox中不可编辑。 Chrome工作正常。 任何想法都会很有帮助。请分享不同的方法，以满足要求。

jsfiddle.net/dsriniudt/xxndahs2/

Answer 1

我认为这是你在找什么，并在未来它是最好的，包括一个适当的例子。请阅读：

https://stackoverflow.com/help/mcve

对于您的问题，我们要允许它已被删除后的标签进行编辑。一旦完成，它应该被保存为标签。

工作实例：https://jsfiddle.net/Twisty/xxndahs2/6/

的JavaScript

$(function() { 
    $("#sortable1, #sortable2").sortable({ 
    connectWith: ".connectedSortable, .connectedSortable1" 
    }).disableSelection(); 

    $("#sortable2").droppable({ 
    cancel: "#addCustomTitle", 
    disabled: false, 
    drop: function(e, ui) { 
     // Use class 'cutomLabel' to identify labels that can be edited 
     ui.draggable.addClass("customLabel"); 
    } 
    }); 

    $("#sortable2").on("click", ".customLabel", function(e) { 
    console.log("Click capture, opening Text Box."); 
    // Capture current text 
    var currentLabel = $(this).text(); 
    // Replace current HTML with Input field 
    $(this).html($("<input>", { 
     class: "entryField", 
     type: "text", 
     value: currentLabel 
    })); 
    // Set focus inside input field 
    $(this).find("input").focus(); 
    return false; 
    }); 

    $("#sortable2").on("blur keypress click", ".entryField", function(e) { 
    console.log(e); 
    switch (true) { 
     case e.keyCode == $.ui.keyCode.ENTER: 
     case e.keyCode == $.ui.keyCode.TAB: 
     case e.originalEvent == "blur": 
     case e.type == "focusout": 
     console.log("Leaving field or Enter was struck, saving value."); 
     // Capture value of input field 
     var currentValue = $(this).val(); 
     // Replace HTML with text 
     $(this).parent().html(currentValue); 
     break; 
    } 
    }); 
}); 

所以，你不妨换个如何 “拯救” 发生。你可以添加按钮，但我怀疑你正在寻找点击或导航类型模型。所以如果用户点击ENTER或TAB或者他们点击输入，它会保存当前值。