一个简短的问题。我正在使用jquery.forms.js插件。
我有一个表单,可以发布到php页面并用json返回数据。
返回的数据是新表单的代码(它将替换用于发布信息的表单)。新表单没有绑定到任何jquery函数,因为页面加载时它不在附近。
所以,我如何让ajax表单识别新表单,以便如果我需要再次使用该表单,它还利用jquery函数?

// jQuery for submitting info to php doc and, on success, replacing the form
$(document).ready(function() {
    jQuery('form[id*=postOnline]').ajaxForm({
        dataType: 'json',
        success: function(data) {
            $('#onlineStatus' + data.rid).html(data.formed).slideDown('slow');
            bindNote();
         }
    });
});

<!-- /////////////////////// POST ONLINE /////////////////////// -->

<div id='onlineStatus<?php echo $b_id ?>' class='postOnline'>
  <form name="postOnline"  id="postOnline<?php echo $b_id ?>" action="postOnline.php" method="post">
    <input type="hidden" value="<?php echo $b_id ?>" name="b" />
    <input type="hidden" value="1" name="p" />
    <input type="submit" class="button"  value="Post Online" />
  </form>
</div>

<!-- /////////////////////// POST ONLINE /////////////////////// -->


// ... code for entering data into database and then...
$result = mysql_query( $sql );
if($result) {
if($show == '1'){$val = 'remove from online'; $num='0';}
if($show == '0'){$val = 'show online'; $num='1';}

$return = "
<form name='postOnline'  id='postOnline$id' action='postOnline.php' method='post'>
<input type='hidden' value='$b_id' name='b' />
<input type='hidden' value='$num' name='p' />
<input type='submit' class='button'  value='$val' />
</form>
";
    print json_encode(array("rid" => $id, "formed" => $return));
}
?>

最佳答案

最简单的解决方案是不使用jquery的表单插件并手动执行,这其实并不十分困难:

$(document).ready(function() {
    jQuery('form[id*=postOnline]').live('submit', function() {
        var formdata = $(this).serialize();
        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            dataType: 'json',
            data: formdata,
            success: function(data) {
                $('#onlineStatus' + data.rid).html(data.formed).slideDown('slow');
                bindNote();
            }
        });
        return false;
    });
});

现在,由于您正在使用jquery的新(1.3)live功能,您添加的任何与form[id*=postOnline]选择器匹配的表单仍将与此事件关联。
或者,您可以打开jquery表单代码,找到它绑定的位置,并尝试修改它,以便使用它live。另一种选择是将连接包含在函数中,并在成功函数结束时调用它,如下所示:
function bindForm() {
    jQuery('form[id*=postOnline]').ajaxForm({
        dataType: 'json',
        success: function(data) {
            $('#onlineStatus' + data.rid).html(data.formed).slideDown('slow');
            bindNote();
            bindForm();
        }
    });
}

$(document).ready(function() {
    bindForm();
});

我认为它不太整洁,但应该有用。

10-04 22:35
查看更多