[英]Javascript/jQuery Adding Elements to Form and binding events
I'm trying to create a dynamic form, which would have drop-down items which when changed would generate certain input fields. 我正在尝试创建一个动态表单,该表单将具有下拉菜单项,这些下拉菜单项在更改时会生成某些输入字段。 the form is to have at least 1 drop-down on load.
该表格至少要有1个下拉菜单。
The problem I am facing is that I would need to add a maximum of 4 drop-down items, which would generate the same fields. 我面临的问题是,我最多需要添加4个下拉项,这些项会生成相同的字段。 I can generate the drop-down elements, but I am finding it hard to understand where and how should I plug in my event handler so that the generated elements can use them as soon as they generate.
我可以生成下拉元素,但是我很难理解应该在哪里以及如何插入事件处理程序,以便所生成的元素可以在生成后立即使用它们。
I have a standard event handling function such as below to handle the default which would get the selected value and would call respective methods to generate the form. 我有一个标准的事件处理函数,例如下面的函数,用于处理默认值,该默认值将获取所选值并调用相应的方法来生成表单。
<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();
....
});
This bit works fine ^ 这一点工作正常^
http://jsfiddle.net/fatgamer85/f8QWc/2/ http://jsfiddle.net/fatgamer85/f8QWc/2/
I am trying to add a maximum of 4 select options; 我正在尝试添加最多4个选择选项; and I would like each of them linked to a common event handler?
我希望每个人都链接到一个公共事件处理程序? and generate form
并生成表格
<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?
Any ideas would be much appreciated. 任何想法将不胜感激。
The id selector is used to specify a single, unique element. id选择器用于指定单个唯一元素。 The class selector is used to specify a group of elements.
类选择器用于指定一组元素。 Make use of class selector.
利用类选择器。
<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>
and 和
$(document).on("change",".question-type", function(){
....
generateTextField();
....
});
You should use event delegation 您应该使用事件委托
$(".questions-list").on("change", ".question-type", function(){
....
generateTextField();
....
});
Now for every new select you have same event handler. 现在,对于每个新选择,您都有相同的事件处理程序。
Check the fiddle http://jsfiddle.net/f8QWc/5/ Now the problem is elements added from other selects replaces this added earlier. 检查小提琴http://jsfiddle.net/f8QWc/5/现在,问题是从其他选择中添加的元素替换了之前添加的元素。 I'm not sure how it should work?
我不确定应该如何运作?
I have created you this script and showed how it should look like. 我已经为您创建了此脚本,并显示了它的外观。 Take a good look at the
global_id
counter, and the use of html. 好好看看
global_id
计数器和html的用法。 I didn't initialize the first fieldset
cause you can do it yourself very well. 我没有初始化第一个
fieldset
因为您可以自己做得很好。 I did create only the things your script had trouble with. 我只创建了脚本遇到的问题。 http://jsfiddle.net/f8QWc/9/
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++;
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.