动态jQuery不在.append(）之后发布表单的添加输入 - Dynamically jQuery not posting add inputs of a form after the .append()

Dynamically jQuery not posting add inputs of a form after the .append()

除了我，我使用appends添加输入，但post表单不是添加输入数据。

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

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);
?>

首先，您必须使用正确的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按钮是一个好主意（但是，不能使用单词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更改之前导航离开页面