jQuery，动态添加的字段和jQuery在这些字段上

Question

我有一个用单个文本字段初始化的页面。在该文本字段上是一个自动完成功能，可以从自动填充中填充其他3个div，其中包含有关选择的相关信息。效果很好！

但是，当用户按下按钮时，我还可以添加其他文本字段，就像第一个一样。事实上，这些动态添加字段的自动完成工作正常，它是不能正常工作的div的填充。但说实话，我不知道如何让它发挥作用。

这是一个被删除并且有效的小提琴（除了辅助div填充。我希望这有助于澄清。

https://jsfiddle.net/crhall75/aq08ujzz/#&togetherjs=Pu0RFy2Ls3

        <table>
      <tr>
        <td>
          <div class="input_fields_wrap">
            <button class="add_field_button">Add More Fields</button>
            <div>        
            <table><tr><td><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></td></tr></table></div>
          </div>
        </td>
      </tr>
    </table>



    cardlist = [
    {value: '2406421',  label: '2406421',  data1: 'Big',  data2: 'Bldg',  data3: 'Room'}, 
    {value: '2406494',  label: '2406494',  data1: 'Big',  data2: 'Bldg',  data3: 'Room'}, 
    {value: '2406496',  label: '2406496',  data1: 'Big',  data2: 'Bldg',  data3: 'Room'}];

$(document).ready(function() {
     var listOfCards = cardlist;
     //var listOfOrders = document.getElementById('orderList').value.split("|") ;
    $( ".cage_ID" ).autocomplete({
         focus: function( event, ui ) {
            $( "#cage_ID" ).val( ui.item.value );
            $( "#cage_type" ).text( ui.item.data1 );
            $( "#building" ).text( ui.item.data2 );
            $( "#room" ).text( ui.item.data3 );
            return false;
         },

        source: listOfCards
    });
var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $(".input_fields_wrap"); //Fields wrapper
var add_button      = $(".add_field_button"); //Add button ID

var card_opt={
        source: listOfCards,
        minLength: 2
    };

var x = 3;
$(add_button).click(function(e){
     //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment
        newRow = $('<table width="100%"><tr><td width="25%" class="copy"><input id="DLAM_CARD_ID_'+x+'" class="textbox cage_ID" name="DLAM_CARD_ID_'+x+'"value=""/></td><td width="25%" class="copy"><div id="cage_type_'+x+'"></div></td><td width="25%" class="copy"><div id="building_'+x+'"></div></td><td width="25%" class="copy"><div id="room_'+x+'"></div></td><td width="1%" class="copy"><a class="remove_field" href="##"><img src="/common/fam/cancel.png"></a></td></tr></table>');
        $('.cage_ID', newRow ).autocomplete(card_opt);
        $(wrapper).append(newRow ); //add input box
        document.getElementById('count').value = x;
    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('td').parent('tr').remove(); x--;
        //document.getElementById('count').value = x;
})
});

Answer 1

推翻了一些缺失的项目，我能够做出一些有用的例子：https://jsfiddle.net/Twisty/hquk1f7b/

<强> HTML

<div class="ui-widget">
  <label for="cards">Card: </label>
  <input id="cards" class="cage_ID_1" />
  <button id="add_button">
    Add
  </button>
</div>
<div  class="ui-widget" id="wrapper">
</div>

JQUERY UI

var listOfCards = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",
  "Erlang",
  "Fortran",
  "Groovy",
  "Haskell",
  "Java",
  "JavaScript",
  "Lisp",
  "Perl",
  "PHP",
  "Python",
  "Ruby",
  "Scala",
  "Scheme"
];

var x = 1;
var max_fields = 10;

$(document).ready(function() {
  // this is for the first textfield
  //var listOfCards = < cfoutput > #cardList# < /cfoutput>

  $(".cage_ID_1").autocomplete({
    focus: function(event, ui) {
      $("#cage_ID_1").val(ui.item.value);
      $("#cage_type_1").text(ui.item.data1);
      $("#building_1").text(ui.item.data2);
      $("#room_1").text(ui.item.data3);
      return false;
    },
    source: listOfCards
  });

  var card_opt = {
    source: listOfCards,
    minLength: 2
  };

  $("#add_button").click(function(e) {
    //onadd input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      var newRow = $('<table width="100%"><tr><td width="25%" class="copy"><input id="ID_' + x + '" class="textbox cage_ID" name="ID_' + x + '" onKeyPress="return blockEnterKey(event);" value=""/></td><td width="25%" class="copy"><div id="cage_type_' + x + '"></div></td><td width="25%" class="copy"><div id="building_' + x + '"></div></td><td width="25%" class="copy"><div id="room_' + x + '"></div></td><td width="1%" class="copy"><a class="remove_field" href="##"><img src="/common/fam/cancel.png"></a></td></tr></table>');
      $(newRow).find("input").autocomplete(card_opt);
      $("#wrapper").append(newRow); //add input box
      $("#count").val(x);
    }
  });
});

我强烈怀疑问题是你如何选择input。

<强>更新

看到你的小提琴后，我几乎应该创造一个完整的第二个答案。我将操作分解为自己的功能，因此它们可以更容易地在循环中使用或有条件地使用。我还添加了一个删除行的函数。为了便于选择，我添加了row_1并调整了其他div项的ID，以进行关联并保持动态。如果所有ID都相同，那么最终会填充每个ID，而不是仅填充那一行。

新小提琴：https://jsfiddle.net/Twisty/3va6312y/

<强> HTML

<button class="add_field_button button">Add A Card</button>
<input type="hidden" name="count" id="count" value="1" />
<table width="98%" border="0" cellpadding="0" cellspacing="0" class="input_table">
  <tr>
    <td width="25%" class="">Card </td>
    <td width="25%" class="">Type</td>
    <td width="25%" class="">Building</td>
    <td width="25%" class="">Room</td>
    <td width="1%" class=""></td>
  </tr>
  <tr>
    <tr id="row_1">
      <td width="25%" class="copy">
        <input id="card_id_1" class="textbox cage_ID" name="card_id_1" data-id="1" value="" />
      </td>
      <td width="25%" class="copy">
        <div id="cage_type_1"></div>
      </td>
      <td width="25%" class="copy">
        <div id="building_1"></div>
      </td>
      <td width="25%" class="copy">
        <div id="room_1"></div>
      </td>
      <td width="1%" class="copy"><a class="remove_field" href="##" data-id="1">X</a></td>
    </tr>
</table>

我不是嵌套表的粉丝，所以我把它简化为1个表，我们只是在该表上添加一个新行。这使列保持对齐，使生活更轻松。您可以轻松地返回将新表附加到表格的新行中，您可以选择。

JQuery UI

var cardlist = [{
  value: '2406421',
  label: '2406421',
  data1: 'Big',
  data2: 'Bldg',
  data3: 'Room'
}, {
  value: '2406494',
  label: '2406494',
  data1: 'Medium',
  data2: 'Bldg',
  data3: 'Room'
}, {
  value: '2406496',
  label: '2406496',
  data1: 'Small',
  data2: 'Bldg',
  data3: 'Room'
}];

$(document).ready(function() {
  var listOfCards = cardlist;
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_table"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID
  var card_opt = {
    select: function(event, ui) {
      var rowId = $(event.target).data("id");
      $("#cage_type_" + rowId).text(ui.item.data1);
      $("#building_" + rowId).text(ui.item.data2);
      $("#room_" + rowId).text(ui.item.data3);
    },
    focus: function(event, ui) {
      //var rowId = event.target.attributes['data-id'].nodeValue;
      var rowId = $(event.target).data("id");
      console.log(rowId);
      $("#cage_type_" + rowId).text(ui.item.data1);
      $("#building_" + rowId).text(ui.item.data2);
      $("#room_" + rowId).text(ui.item.data3);
      return false;
    },
    source: listOfCards,
    minLength: 2
  };

  function makeRow(nr, co, tw) {
    // nr = New Row ID Number
    // co = Card Options for new Autocomplete
    // tw = Target Wrapper
    console.log("Making new Row", nr);
    var newRow = $("<tr>", {
      id: "row_" + nr
    });
    newRow.append("<td width='25%' class=''><input id='card_id_" + nr + "' class='textbox cage_ID' name='card_id_" + nr + "' data-id='" + nr + "' /></td>");
    newRow.find("input").autocomplete(co);
    newRow.append("<td width='25%' class='copy'><div id='cage_type_" + nr + "'></div></td>");
    newRow.append("<td width='25%' class='copy'><div id='building_" + nr + "'></div></td>");
    newRow.append("<td width='25%' class='copy'><div id='room_" + nr + "'></div></td>");
    newRow.append("<td width='1%' class='copy'><a class='remove_field' href='##' data-id='" + nr + "'>X</td>");
    tw.append(newRow);
  }

  function removeRow(r) {
    console.log("Removing Row", r);
    $("#row_" + r).remove();
    if (r == $("#count").val()) {
      console.log("Reducing Count");
      $("#count").val(r - 1);
    }
  }

  $(".cage_ID").autocomplete(card_opt);

  var x = 3;
  $(add_button).click(function(e) {
    //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      makeRow(x, card_opt, wrapper);
      $("#count").val(x);
    }
  });
  $(wrapper).on("click", ".remove_field", function(e) {
    removeRow($(this).data("id"));
  });
});