Javascript 单击时动态加载输入字段？

目前，我有一个从数据库中获取的字符串列表。然后，我用一个

foreach

语句遍历这些字符串，并在它们自己的

中打印它们

当我点击一个

时，会触发一个jQuery事件。它从

中获取字符串，并将其放置在输入字段值中，直到现在它仍然可以正常工作

但是，当我在输入字段中单击时，文本值消失，并且我无法将输入字段设置为焦点，并且它不允许我键入

我的问题是：为什么我的输入值消失了，为什么它不允许我在输入字段中键入任何内容

代码如下：

单击之前的HTML

<li id="list_item-47" class="sortableList" data-id="47">
    The Title
    <br>
    <br>
</li>

<li id="list_item-47" class="sortableList" data-id="47">
    <input type="text" class="inputField" value="The Title">
    <div class="updateLink" data-id="47"></div>
</li>

标题

单击后的HTML

<li id="list_item-47" class="sortableList" data-id="47">
    The Title
    <br>
    <br>
</li>

<li id="list_item-47" class="sortableList" data-id="47">
    <input type="text" class="inputField" value="The Title">
    <div class="updateLink" data-id="47"></div>
</li>

焦点后的HTML

<li id="list_item-47" class="sortableList" data-id="47">
    <input type="text" class="inputField" value>
    <div class="updateLink" data-id="47"></div>
</li>

jQuery：

$(".sortableList").on("click", function(event){
    event.preventDefault();

    var list_item = $(this).text();
    var data_id = $(this).data('id');       

    $(this).html('<input type="text" class="inputField" value="' + list_item + '"></input><div class="updateLink" data-id="' + data_id + '"></div>');       

    return false;

}); 

$（.sortableList”）。在（“单击”上，函数（事件）{
event.preventDefault（）；
var list_item=$（this）.text（）；
var data_id=$（this.data（'id'）；
$（this.html（“”）；
返回false；
}); 

---

非常感谢您的帮助。

输入正在消失，因为您创建的输入位于.sortableList范围内，并且该范围附带了一个单击事件。因此，当您单击输入时，您将触发单击事件，该事件将用一个空文本框替换该li的内容

快速修复方法是在单击功能中添加以下内容：

$(this).off('click');

---

但是，当您想保存文本字段中的内容时，您仍然需要处理这些内容，如果您想再次修改该值，则需要重新打开该单击事件…

尝试删除
标记和

标记中的额外空格。p刚刚测试了这一点，它对我有效，谢谢您的帮助！！