这些字段上的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。

UPDATE

看到你的小提琴后，我几乎要营造全第二个答案。我将操作分解为各自的功能，以便它们可以更容易地在循环中或有条件地使用。我还添加了一个函数来删除一行。为了便于选择，我添加了row_1并调整了其他div项目的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用户界面

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")); 
    }); 
});