Question

这是一个类似于CRUD系统的编辑功能，但想法是简化，当用户通过单击或双击某个项目时，它将变成一个字段来直接更新数据..

演示here

问题是我不能在字段中输入任何内容，我想知道为什么......

HTML

<li style="list-style:none">click here to edit</li>

jquery的

$(document).ready(function(){

$('li').click(function(){
   $(this).html("<input id='input' type='text'>");
});

$('#input').blur(function(){
  var newVal = ('#input').val();
      $('li').text('newVal');   
   });
});

Answer 1

这是因为点击文字字段也是点击'li'。因此，当您单击现有文本字段时，它会添加一个新的文本字段。

这是工作小提琴：http://jsfiddle.net/DNmNE/5/

代码：

$(document).ready(function(){
    $('li').click(function(){
       input = $("<input id='input' type='text'>").blur(function(){
          $('.editable').removeClass('editable');
          var newVal = $(this).val();
          $('li').text(newVal);   
       });
       if (!$(this).hasClass('editable'))
           $(this).addClass('editable').html(input);
    });
    });

我使用.editable类来检测文本字段是否已经打开。

Answer 2

好吧，我的amigo，你每次点击都会附加一个新的输入，所以你需要输入真正的快速（开玩笑）。但那就是问题所在。松开了点击功能。

Answer 3

只是一个想法，但您是否考虑过使用 HTML5 contenteditable功能？

http://html5demos.com/contenteditable

显然，它不会在过时的浏览器中运行，但如果你不关心它，那么随着应用程序的增长，它将为你节省大量的工作。

使用jquery编辑带有用户输入的段落

3 个答案: