0

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

当我单击 a 时，<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;

});

任何帮助是极大的赞赏。

4

1 回答 1

1

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

一个快速的解决方法是在你的点击函数中添加这个：

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

http://jsfiddle.net/8D9VY/

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

于 2013-11-11T15:48:57.617 回答