javascript - 使用 ajax 表单的简单 jQuery 就地编辑

Question

在一个非常非常简单的内联编辑中，jQuery 将文本更改为可编辑形式

$(document).ready(function() {
 $(".editable").bind("dblclick", function () {
  OriginalText = $(this).html();
  $(this).html("<form id='test' method='post' action='test.php'>
  <input type='text' class='editBox' value='" + OriginalText + "' />
  <input type='submit' value='change' /> </form>")
 }); 
});

现在这个表单适用于更改文本，但我想让它与ajax一起使用；代码如下

$(function(){
    $('#test').submit(function(e){
        e.preventDefault();
        var form = $(this);
        var post_url = form.attr('action');
        var post_data = form.serialize();
        $.ajax({
            type: 'POST',
            url: post_url, 
            data: post_data,
            success: function(msg) {
                $(form).fadeOut(500, function(){
                    form.html(msg).fadeIn();
                });
            }
        });
    });
});

但是当将它们用作单独的函数时，它们不起作用，可能是因为表单本身是由 jQuery 生成的，而不是原始 html 的一部分。如何混合这两个函数来生成基于 ajax 的表单？

Answer 1

您需要委托(delegate)单击，因为表单和提交元素是在页面加载后动态添加的。 Look at this doc

所以你的 JS 看起来像这样。

$(document).ready(function() {
 $(".editable").bind("dblclick", function () {
  OriginalText = $(this).html();
  $(this).html("<form id='test' method='post' action='test.php'>
  <input type='text' class='editBox' value='" + OriginalText + "' />
  <input type='submit' value='change' /> </form>")
 }); 
});

$('body').delegate('#test','submit',function(e){
e.preventDefault();
        var form = $(this);
        var post_url = form.attr('action');
        var post_data = form.serialize();
        $.ajax({
            type: 'POST',
            url: post_url, 
            data: post_data,
            success: function(msg) {
                $(form).fadeOut(500, function(){
                    form.html(msg).fadeIn();
                });
            }
        });
});