jquery - 如何使用 jquery 在 div 中添加带有值的文本框(就地编辑)

Question

嗨，我正在尝试使用 jquery 将就地编辑功能添加到我的网站。我不想使用插件，所以我的想法是，当您单击其中包含内容的 div 时，它会用文本框替换该 div，然后在模糊时提交一个帖子来保存内容。

到目前为止，我有点击事件，但我不知道如何用文本框替换 div，然后使其在模糊状态下提交，但我可能可以弄清楚 ajax 请求。

任何帮助都会很棒，谢谢。到目前为止，这就是我所拥有的......只是点击事件:

$('.control-panel-profile-update').click(function() {
      alert('Handler for .click() called.');
    });

Answer 1

它还没有完全写好，也可能无法完全发挥作用，但值得一试。祝你好运:

$('.control-panel-profile-update').live('click', function() {
  $(this).replaceWith('<input type="text" id="inlineEdit" value="' + $(this).html() + '" />');

  $('#inlineEdit').focus().live('blur keyup', function(event) {
    if (event.keyCode && event.keyCode != 13) return false;

    $(this).replaceWith('<div class="control-panel-profile-update">' + $(this).val() + '</div>');
  });
});

<小时/>

这是一个 fiddle :http://jsfiddle.net/Af6X6/2/ 。我还添加了对 enter 键的支持。