动态jQuery不在.append（）之后发布表单的添加输入

Question

令我感到惊讶的是，我使用追加添加输入，但发布形式不是添加输入数据。

请谈谈我，我该怎么办，非常感谢！

HTML代码

<form class="form_a" action="test_a.php" method="POST" >
    <div class="language">
        <div class="append">

        </div>
        <button type="button" class="add">add Button</buttond>

        <input type="submit" value="click me submit form">
    </div>
</form>

JavaScript代码

$('.language .add').click(function(){
    $('.language .append').append(
        '<input name="language[]" class="form-control" value="test">'
    );
});

PHP代码

<?php
  print_r($_POST);
?>

Answer 1

首先，您必须使用正确的jQuery选择器来获取Submit按钮。

接下来，您不能像在PHP中那样在代码中包含换行符-必须转义任何换行符：

$('.language .append').append(\
    '<input name="language[]" class="form-control" value="test">'\
);

 $('input[type=submit]').click(function(e){ e.preventDefault(); $('.language>.append').append('<input name="language[]" class="form-control" value="test">'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <form class="form_a" action="test_a" method="POST" > <div class="language"> <div class="append"> </div> <label class="add"></label> <input type="submit" value="click"> </div> </form> 

---

注意：使用ID属性捕获“提交”按钮是一个好主意（但是，不能使用“ submit ”一词作为ID）。 就像是：

<input id="btnSubmit" type="submit" value="click">


$('#btnSubmit').click(function(){
  $('.language>.append').append('<input name="language[]" class="form-control" value="test">');
});

注意：答案示例摘录中的e.preventDefault()可以防止FORM元素执行其默认操作并在有机会看到DOM更改之前离开页面。