html表单在用jquery追加后未提交

Question

我使用jquery附加功能附加HTML表单，但是当我单击“提交”按钮时，它不会提交

$( "body" ).on( "click", "#addPackage", function() {
    packageId = 'package'+ id;
    id = id+1;
  $('.table tbody').append('<tr id="' + packageId + '"> <form class="" onsubmit="editPackage();return false;" method="post"><td><input type="text" name="package_name" value="" /></td><td><input type="text" name="package_price" value="" /></td><td><input type="text" name="package_details" value="" /></td><td><button class="btn btn-success" ><i class="fa fa-save"></i></button> <span class="btn btn-danger remove-btn"><i class="fa fa-remove"></i></span></td></form></tr>');
});

Answer 1

这可能是您想要的，而不是在incorrect注释中使用<form>中的<tr>（仅执行功能editPackage）（而Justinas是 ），您可以在单击行按钮之后执行editPackage并以这种方式从行读取数据（我从附加字符串中删除<form>并更改了<button>）：

let id=0;
$( "body" ).on( "click", "#addPackage", function() {
    packageId = 'package'+ id;
    id = id+1;
    //console.log($('.table tbody'));
  $('.table tbody').append('<tr id="' + packageId + '"> <td><input type="text" name="package_name" value="" /></td><td><input type="text" name="package_price" value="" /></td><td><input type="text" name="package_details" value="" /></td><td><button class="btn btn-success" onclick="editPackage(this)">submit<i class="fa fa-save"></i></button> <span class="btn btn-danger remove-btn"><i class="fa fa-remove"></i></span></td></tr>');
});

function editPackage(btn) {
  let tds =btn.parentNode.parentNode.children
  let v1=tds[0].children[0].value;
  let v2=tds[1].children[0].value;
  let v3=tds[2].children[0].value;
  console.log('submit', v1, v2, v3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="addPackage">add</button>
<table class="table"><tbody></tbody><table>