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

您需要委派点击，因为表单和提交元素是在页面加载后动态添加的。 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();
                });
            }
        });
});

Answer 2

你的直觉认为它不起作用，因为jQuery正在生成应该绑定一个事件的HTML是正确的。

探索.live()和.delegate()，它们将通过绑定到当前和未来与选择器匹配的所有HTML元素来解决您的问题。

一个简单的jQuery就地编辑，带有ajax表单

2 个答案: