javascript - jQuery 附加表单元素未提交

Question

我之前使用过动态添加的 jQuery 元素，并且效果很好。只是现在它不起作用，我无法弄清楚。

我尝试了以下方法，但没有成功:

1. 为每个输入元素使用唯一的 ID。
2. e.preventDefault();

显示的 php 输出是 {'action':'test'} 这是序列化之前的数据值。为什么它不获取/提交动态添加的值？

HTML

<table class='header_tbl' style="background:none !important;">

  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Qty</th>
      <th>Sub Total</th>
      <th></th>
    </tr>
  </thead>

  <form action="#" method="POST" id="cart_form">

    <tbody>
    </tbody>
    <tfoot>

      <tr>
        <td>Total</td>
        <td></td>
        <td><span class='qty_1'></span>
        </td>
        <td><span class='total'></span>
        </td>
        <td></td>
      </tr>

      <tr>
        <td>GST 6%</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>

      <tr>
        <td>Discount (x%)</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>

      <tr>
        <td>Total Payment</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>

      <tr>
        <td colspan="5" class="checkout">
          <input type="submit" name='submit' id="checkout" value="CHECK OUT" />
        </td>
      </tr>
    </tfoot>

  </form>


</table>

动态附加元素的脚本:

for (i = 0; i < data.length; i++) {
    $(".header_tbl tbody").prepend("<tr id='"+data[i].id+"'><th class='product'>"+data[i].catalog_name+"<input type='text' name='catalog_name[]' value='"+data[i].catalog_name+"'></th><td class='price'>RM <span>"+data[i].price_normal+"</span><input type='text' name='"+data[i].id+"_price[]' value='"+data[i].price_normal+"'></td><td class='qty_"+data[i].id+"'><input type='text' name='qty' style='width:50px;height:20px;margin:10px auto;' onkeyup='subTotal(\""+data[i].id+"\")' onfocusout='calTotal(\""+data[i].id+"\")'><input type='text' name='"+data[i].id+"_qty2[]' value=''></td><td class='sub_total'><span class='sub_total_"+data[i].id+"'></span><input type='text' name='"+data[i].id+"_sub_total[]' value=''></td><td><img src='"+p_img_path+"del.png' style='width:15px;cursor:pointer;' onClick='del_this(\""+data[i].id+"\")'></td></tr>");  
}

提交表单的脚本

//submit cart_form
$('#checkout').on('click', function() {

  $("#cart_form").submit(function() {
    var data = {
      "action": "test"
    };
    data = $(this).serialize() + "&" + $.param(data);

    $.ajax({
      type: "POST",
      dataType: "json",
      url: "submit_cart.php", //Relative or absolute path to response.php file
      data: data,
      success: function(data) {
        alert(data);
      }

    });
    return false;
  });
});

PHP

<?php
session_start();
include('config.php');

$return = $_POST;


$return["json"] = json_encode($return);
// json_encode($return);
//  
//below code to store in database 
$data = json_decode($return["json"], true);
  
           
echo json_encode($return["json"]);
?>

它看起来是这样的:

Answer 1

如果您将 <form> 包装起来，您的代码似乎会工作得更好围绕整个 table 。请注意 <table>元素具有特定的permitted content那一个<form>元素不在其中。

var data = [{id: 1,name:'test1'},{id:2,name: 'test2'}],
    $output = $('#output');

for (i = 0; i < data.length; i++) {
  $(".header_tbl tbody").prepend("<tr id='" + data[i].id + "'><td class='product'>" + data[i].name + "<input type='text' name='catalog_name[]' value='" + data[i].name + "'></td></tr>");
}


//submit cart_form

$("#cart_form").submit(function() {

  var data = {"action": "test"};

  data = $("#cart_form").serialize() + "&" + $.param(data);
  $output.text(data);

  return false;

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="#" method="POST" id="cart_form">
  <table class='header_tbl' style="background:none !important;">

    <thead><tr><th>Product</th><th>Price</th><th>Qty</th><th>Sub Total</th><th></th></tr></thead>

    <tbody></tbody>
    
    <tfoot>
      <tr><td>Total</td><td></td><td><span class='qty_1'></span></td><td><span class='total'></span></td><td></td></tr>
      <tr><td>GST 6%</td><td></td><td></td><td></td><td></td></tr>
      <tr><td>Discount (x%)</td><td></td><td></td><td></td><td></td></tr>
      <tr><td>Total Payment</td><td></td><td></td><td></td><td></td></tr>
      <tr>
        <td colspan="5" class="checkout">
          <input type="submit" name='submit' id="checkout" value="CHECK OUT" />
        </td>
      </tr>
    </tfoot>

  </table>
</form>

<div id="output"></div>