jQuery - 以特定的分隔形式更改输入值

Question

我在使用jQuery更改输入值时遇到问题，表单与输入标记分开，因为我使用HTML表（tr，td等等）而且表单不能在HTML表格中。 无论如何，当我尝试更改输入值或以相同的形式获取输入值时，我得到“未定义”，这里是完整的代码：

＆＃13;

＆＃13;

$(document).ready(function() {
  var iUnique = 0;

  $("#addSelected").submit(function(event) {
    event.preventDefault();

    var mySelectID = $('select[id=mySelect]').val();

    $('#forms form:last').after("<form class='ContentForm' id='formContent" + iUnique + "' method='POST'></form>");
    $('#table tr:last').after("<tr><td><input type='text' name='type' value='" + mySelectID + "' form='formContent" + iUnique + "' /></td><td><input type='text' name='Title' value='' form='formContent" + iUnique + "' /></td><td><input type='text' name='Keywords' value='' form='formContent" + iUnique + "' /></td><td><button class='generateKeywords' form='formContent" + iUnique + "'>Keywords</button></td></tr>");
    iUnique++;
  });

  $(document).on('click', '.generateKeywords', function() {
    var $form = $(this.form); // get form
    var $inputs = $form.find("input, select, button, textarea");
    var serializedData = $form.serialize(); // actually this for ajax

    $inputs.prop("disabled", true); // nothing disabled -- not working

    var response = "test, test2"; // this supposed to come from ajax
    $form.find("[name='Keywords']").val(response); // not working

    alert('end of listener');
    return false; // disable refresh
  });
});

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<form id="addSelected" method="POST">
  <select id="mySelect">
				<option value="0">First</option>
				<option value="1">Second</option>
			</select>
  <input type="submit" value="Add" />
</form>

<div id="forms">
  <form></form>
</div>

<table id="table">
  <tr>
    <th>Type</th>
    <th>Title</th>
    <th>Keywords</th>
    <th></th>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

$(document).ready(function() {
  var iUnique = 0;

  $("#addSelected").submit(function(event) {
    event.preventDefault();

    var mySelectID = $('select[id=mySelect]').val();

    $('#forms form:last').after("<form class='ContentForm' id='formContent" + iUnique + "' method='POST'></form>");
    $('#table tr:last').after("<tr><td><input type='text' name='type' value='" + mySelectID + "' form='formContent" + iUnique + "' /></td><td><input type='text' name='Title' value='' form='formContent" + iUnique + "' /></td><td><input type='text' name='Keywords' value='' form='formContent" + iUnique + "' /></td><td><button class='generateKeywords' form='formContent" + iUnique + "'>Keywords</button></td></tr>");
    iUnique++;
  });

  $(document).on('click', '.generateKeywords', function() {
    // get form name
    var form = this.getAttribute('form');
    // get all the inputs and filter on the form name
    var $inputs = $("input, select, button, textarea").filter(function(){
      return this.getAttribute('form') === form;
    });
    // serialize the found elements
    var serializedData = $inputs.serialize();
    console.log(serializedData);

    $inputs.prop("disabled", true); // nothing disabled -- not working

    var response = "test, test2"; // this supposed to come from ajax
    $('input').filter("[name='Keywords']").val(response); // not working

    //alert('end of listener');
    return false; // disable refresh
  });
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<form id="addSelected" method="POST">
  <select id="mySelect">
				<option value="0">First</option>
				<option value="1">Second</option>
			</select>
  <input type="submit" value="Add" />
</form>

<div id="forms">
  <form></form>
</div>

<table id="table">
  <tr>
    <th>Type</th>
    <th>Title</th>
    <th>Keywords</th>
    <th></th>
  </tr>
</table>