单击时动态加载输入字段

Dynamically loaded input field on click?

本文关键字：输入 字段 加载 动态 单击      更新时间：2023-09-26

目前我有一个从数据库中获取的字符串列表。然后，我使用 foreach 语句遍历这些字符串，并在它们自己的<li></li>中打印它们。

当我单击一个<li>时，我有一个触发的jQuery事件。它从<li></li>中获取字符串并将其放置在输入字段值中，到目前为止它仍然可以正常工作。

但是，当我在输入字段中单击时，文本值消失了，而且我也无法focus输入字段，并且不允许我键入。

我的

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

代码如下：

点击前的网页

<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>

焦点后的网页

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

j查询：

$(".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 范围内，并且该范围附加了一个单击事件。因此，当您单击输入时，您将触发单击事件，该事件将该 li 的内容替换为空文本框。

一个快速的解决方法是将其添加到您的点击功能中：

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

http://jsfiddle.net/8D9VY/

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

相关文章：