Question

我正在尝试创建一个动态表单，该表单具有下拉项目，这些项目在更改时会生成某些输入字段。表格是在负载下至少有一个下拉列表。

我面临的问题是我需要添加最多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++;
});      
});

Javascript / jQuery向表单和绑定事件添加元素

3 个答案: