0

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

演示在这里

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

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');   
   });
});
4

3 回答 3

2

这是因为单击文本字段也是单击“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 类来检测文本字段是否已经打开。

于 2013-08-01T13:56:33.920 回答
1

好吧，我的朋友，您每次单击时都会添加一个新输入，因此您需要快速输入（开玩笑）。但这就是问题所在。松开 li click 功能。

于 2013-08-01T13:55:59.190 回答
0

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

http://html5demos.com/contenteditable

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

于 2013-08-01T13:57:13.487 回答