Javascript/jQuery添加元素到窗體和綁定事件

Question

我試圖創建一個動態窗體，這將有下拉項目，當更改將生成某些輸入字段。形式是至少有1下拉負載。

我面臨的問題是，我需要添加最多4個下拉項目，這將生成相同的字段。我可以生成下拉元素，但我發現很難理解在哪裏以及如何插入我的事件處理程序，以便生成的元素可以在生成後立即使用它們。

我有一個標準的事件處理函數，如下面的處理默認，它將獲得選定的值，並會調用各自的方法來生成表單。

<select id="question-type-1"> 
    .. 
    <option value="text">Text Field</option> 
    .. 
</select> 

// dummy code -- please see jsfiddle link below 
$("#question-type-1").on("change", function(){ 
    .... 
    generateTextField(); 
    .... 
}); 

該位工作正常^

http://jsfiddle.net/fatgamer85/f8QWc/2/

我想最多4個選擇選項添加;我希望他們每個人都鏈接到一個常見的事件處理程序？並生成表格

<select id="question-type-1"> 
    .. 
    <option value="text">Text Field</option> 
    .. 
</select> 

<!-- Generated by JS ---> 
<select id="question-type-2"> 
    .. 
    <option value="text">Text Field</option> 
    .. 
</select> 
<!-- Generated by JS ---> 


// dummy code -- please see jsfiddle link below 
$("#question-type-1").on("change", function(){ 
    .... 
    generateTextField(); 
    .... 
}); 

// Do I manually write 4 different event handling code? 

任何想法將不勝感激。

Answer 1

id選擇器用於指定一個唯一的元素。類選擇器用於指定一組元素。使用類選擇器。

<select class="question-type"> 
    .. 
    <option value="text">Text Field</option> 
    .. 
</select> 

<!-- Generated by JS ---> 
<select class="question-type"> 
    .. 
    <option value="text">Text Field</option> 
    .. 
</select> 

和

$(document).on("change",".question-type", function(){ 
    .... 
    generateTextField(); 
    .... 
}); 

Answer 2

你應該使用事件代表團

$(".questions-list").on("change", ".question-type", function(){ 
    .... 
    generateTextField(); 
    .... 
}); 

現在對每一個新的選擇你有相同的事件處理程序。

檢查小提琴http://jsfiddle.net/f8QWc/5/現在問題是從其他選擇添加的元素替換此前添加的元素。我不確定它應該如何工作？

Answer 3

我已經爲您創建了這個腳本，並展示了它應該是什麼樣子。請仔細看看global_id計數器以及html的使用情況。我沒有初始化第一個fieldset因爲你可以自己做得很好。我確實只創建了你的腳本遇到的麻煩。 http://jsfiddle.net/f8QWc/9/

$(document).ready(function(){ 
// Configuration 
var max_fieldsets = 4; 

// Fieldset adding function 
var global_id = 1; 
function create_fieldset(parent, id) 
{ 
    $(parent).append(
    "<fieldset class=\"fieldset fieldset-"+ id +"\">" + $("#prototype").html() + 
    "</fieldset>"); 
} 

// Dropdown behaviour controller 
$("#add").on("click", function(){ 
    if(global_id > 4) return; // More than 4 added? 
    var handle = create_fieldset("body", global_id); 
    $(".fieldset-"+global_id).children('select').on("click", function() {   // Dropdown actions below: 
     switch($(this).find(":selected").text()) 
     { 
      case "Checkbox": 
      alert("add checkbox"); // Replace it with ur code 
      $(this).val(0); // Reset dropdown 
      break; 
     } 

    }); 
    global_id++; 
});  
});