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