Question

我在表格中有一堆表格作为行。每行末尾都有一个提交按钮。单击此按钮时，我的JQuery函数会创建两个文本框和另一个提交按钮。我想从这两种形式的POST变量，所以我最终可以通过AJAX将它传递到我的PHP脚本。这样做的最佳方式是什么？

<script>
<?php 
$ajax_var = <<<HTML
<form method="post" id="ajax_form">
<div id="ajax_input">
    <input type="text" name="user_name" placeholder="Your name">
    <br>
    <input type="text" name="user_email" placeholder="Your e-mail">
    <br>
</div>
    <input id="ajax_submit" type="submit" value="submit">
</form>
HTML;
$ajax_var = str_replace("\n",'',$ajax_var);
?>

$("form").submit(function(e)
{
    e.preventDefault();
    $("#wrapper").prepend('<?php echo "$ajax_var" ?>');
});
$("form#ajax_form").submit(function(e)
{
    e.preventDefault();
});
</script>

最后一个JQuery函数不能按预期工作。按ajax创建的提交重新加载页面：S

Answer 1

由于#ajax_form最初不存在。你应该使用.on：

$("#wrapper").on("submit", "form#ajax_form", function(e) 
{
    e.preventDefault();
    alert("It is working...");
    // Your code for Ajax
});

如果不确定"body"代替"#wrapper"，您可以使用包装新表单的任何元素。

文档： http://api.jquery.com/on/

根据评论中的沟通添加代码：

<script type="application/javascript">
var arr;
$(function(){
$("form").submit(function(e)
{
    e.preventDefault();
    $("#wrapper").prepend('<?php echo "$ajax_var" ?>');
    arr = $(this).serializeArray();
});
$("#wrapper").on("submit", "form#ajax_form", function(e)
{
    console.log(arr);
    e.preventDefault();
});
});
</script>

JQuery和多个输入，表单，提交

1 个答案: