Question

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

当我点击<li>时，我有一个触发的jQuery事件。它从<li></li>中获取字符串并将其置于输入字段值中，直到现在它仍能正常工作。

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

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

以下代码：

HTML 点击

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

HTML 点击

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

});

非常感谢任何帮助。

Answer 1

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

快速解决方法是在点击功能中添加：

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

http://jsfiddle.net/8D9VY/

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

点击动态加载输入字段？

1 个答案: