4

一个快速的问题。我正在使用 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));
}
?>
4

3 回答 3

6

最简单的解决方案是不使用 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();
});

我不认为它很整洁，但它应该可以工作。

于 2009-02-15T06:14:00.070 回答
2

您需要在 ajax 调用之后重新绑定事件处理程序。我听说 jquery 的新版本中有一个新功能，称为live events，但这会使这变得不必要。

于 2009-02-15T05:38:37.317 回答
0

如果由于某种原因你被 jQuery 1.3 之前的版本卡住了，请使用“ livequery ”插件。

于 2009-02-18T05:47:48.923 回答