如何在爲動態創建的輸入選擇下拉選項時調用jquery函數？

Question

所以這是頁面的樣子目前：

第一種是在硬編碼，然後將其餘的添加/刪除的按鈕。第一個也可以添加或刪除按鈕。我想調用一個jQuery的功能，當下拉列表更改爲從文本框/單選按鈕（和文本）/複選框（和文本）等類型更改。

當前它只適用於第一個問題/答案，只適用於它是原始的而不是動態創建的。我不確定這是爲什麼。

這裏是如何創建的Q/A和刪除

$("#addButton").click(function() { 

    if (counter > max_fields) { 
     alert("Only " + max_fields + " Questions allowed"); 
     return false; 
    } 

    var newTextBoxDiv = $(document.createElement('div')) 
     .attr("id", 'TextBoxDiv' + counter); 

    newTextBoxDiv.after().html('<label>Question #' + counter + ' : </label>' + 
      '<input type="text" name="textbox' + counter + 
      '" id="questionbox' + counter + '" value="" />' + 
      ' <select id="choice'+ counter +'"><option>Type</option><option>Radio Button</option><option>Text Box</option><option>Check Box</option></select>' + 
      '<button id = "remove' + counter + '">Remove</button>' + 
      '<br/><label>Answer #' + counter + ' : </label>' + 
      '<div id="Answers' + counter + '">' + 
      'Option 1: <input type="text" id="answerbox' + counter + 
      '1" name="answerbox' + counter + '" value="" />' + 
      '<br/>Option 2: <input type="text" id="answerbox' + counter + 
      '2" name="answerbox' + counter + '" value="" />' + 
      '<br/>Option 3: <input type="text" id="answerbox' + counter + 
      '3" name="answerbox' + counter + '" value="" />' + 
      '<br/>Option 4: <input type="text" id="answerbox' + counter + 
      '4" name="answerbox' + counter + '" value="" /></div>'); 

    newTextBoxDiv.appendTo("#TextBoxesGroup"); 
    counter++; 
}); 

$("#removeButton").click(function() { 
    if (counter == 1) { 
     alert("No more textbox to remove"); 
     return false; 
    } 
    counter--; 
    $("#TextBoxDiv" + counter).remove(); 
}); 

這是我試圖得到它改變類型

$('#choice1').change(function() { 
    var selected_item = $(this).val() 
    var searchEles = document.getElementById("Answers1").children; 
    alert(searchEles.length); 
    for(var i = 0; i < searchEles.length; i++) { 
     $('#answerbox1' + i).attr('type', selected_item); 
     //alert(searchEles.length); 
    } 

}); 

的網頁代碼如下

<input type='button' value='Add Question' id='addButton'/> 
<input type='button' value='Remove Question' id='removeButton'/> 
<div id='TextBoxesGroup'> 
    <div id="TextBoxDiv1"> 
     <label>Question #1 : </label> 
     <input type='text' id='questionbox1'/> 
     <select id="choice1" onchange="$('#choice').val('id');"> //this on change was added and currently does nothing it seems. 
      <option value="">Type</option> 
      <option value="radio">Radio Button</option> 
      <option value="text">Text Box</option> 
      <option value="checkbox">Check Box</option> 
     </select> 
     <button id="remove1">Remove</button> 
     <br/><label>Answer #1 : </label> 
     <div id="Answers1"> 
      Option 1: <input type="text" id='answerbox11' name='answerbox1' value="" /> 
      <br/>Option 2: <input type="text" id='answerbox12' name='answerbox1' value="" /> 
      <br/>Option 3: <input type="text" id='answerbox13' name='answerbox1' value="" /> 
      <br/>Option 4: <input type="text" id='answerbox14' name='answerbox1' value="" /> 
     </div> 
    </div> 
</div> 

我試圖做一些像onchange這樣的東西，然後得到ID並從那裏去，但沒有奏效。我知道它不匹配後端jQuery名稱。

TL; DR

1. 我不知道如何動態寫jQuery函數工作 爲他們所有。
2. 我不知道爲什麼即使我將其硬編碼到#choice1它將在第一次創建時工作 但是如果我刪除並添加它，即使它 具有相同的確切值，也不會。我認爲它可能可能與 for循環有關，因爲警報甚至不會觸發第二次 左右。

Answer 1

你可以嘗試

$(document).on("change", ".selector", function(){ 
    //do something 

}); 

//編輯

添加到選擇元素類例如選擇選項和標籤，將持有選擇的反

//JS  
...'<select id="choice'+counter+'" class="select-option" number="'+counter+'">'... 

，然後你的變化功能看起來像

$(document).on("change", ".select-option", function(){ 
    //do something 
    var selected_type = $(this).attr('value'); 
    var ans_number = $(this).attr('number'); 
    $("#answerbox"+ans_number).children('input').attr('type', selected_type); 
}); 

我希望這會有所幫助:)

Answer 2

對於動態添加元素使用

$(selector).on("change", callback) 

Answer 3

如果元素是動態的，那麼jQuery將不會作爲

$('#choice1').change(function(){}); 

直接綁定但是，你需要調用相同的功能與一些靜態元素。 對於防爆：

$(".listingDiv").find('#choice1').change(function(){}); 

或

$(document).find('#choice1').change(function(){}); 

，它會工作。嘗試一下。

Answer 4

當元素動態地被賦值時，最好的做法是委託處理程序。把你的處理程序放在包含div或窗口/文檔 。

Answer 5

• 首先

  <select id="choice1" onchange="$('#choice').val('id');"> //this on change was added and currently does nothing it seems. 
  

  這是一個原因，你永遠不會被調用。如果你將一個事件監聽器綁定到一個元素上，你不應該在元素中寫入實際的JS代碼。

• 二

  綁定你的聽衆是這樣的：

$('#choice1').on("change", function() { 
 
    var selected_item = $(this).val() 
 
    var searchEles = document.getElementById("Answers1").children; 
 
    alert(searchEles.length); 
 
    for(var i = 0; i < searchEles.length; i++) { 
 
     $('#answerbox1' + i).attr('type', selected_item); 
 
     //alert(searchEles.length); 
 
    } 
 

 
});