Question

我正在根据您提供的选项创建表单（text / textfield / dropdown）。当我一次创建2个下拉列表时，我不确定如何以一种计算机可以告诉2个元素不同的方式编写，特别是在我的下拉列表创建器中添加新输入时，它无法分辨多个下拉列表。

这是我正在使用的Javascript函数

$('#submit').on('click', function() {
    $("select").each(function() {
        switch($(this).val()) {
            case "text":
                $("#form").append('<p><input type="text"/> <button class="remInput">Remove</button></p>');
                break;
            case "note":
                $("#form").append('<p><textarea></textarea> <button class="remInput">Remove</button></p> ');
                break;
            case "dd":
                $("#form").append('<p><select id="ddFinal"><option></option></select> <button class="remInput">Remove</button></p>');
                $("#ddCreator").append('<button id="ddAddInput">Add Another Field</button> <p class="ddP"><input type="text" name="ddText"/></p> <button id="ddSubmit">Submit</button>');

                break;
        }       
    });
    $('#inputDiv').empty();
    $('#ddAddInput').on('click', function() {
        $("p[class*='ddP']").append('<input type="text" name="ddText"/>');     
    });
    $('#ddSubmit').on('click', function() {
        $("input[name*='ddText']").each(function() {
                $('#ddFinal').append('<option>'+$(this).val()+'</option>');
        });
        $('#ddCreator').empty();
        $('#ddFinal').removeAttr('id');
    });
});

问题在于ddAddInput函数，因为它没有在多个p class =“ddp”元素之间指定，但我不确定我应该放什么。希望这个问题有道理。

这是我目前正在研究http://jsfiddle.net/me74Z/15/

的小提琴

Answer 1

方法中存在一些需要补救的缺陷。

首先： - 根据定义，元素ID在页面中是唯一的。改为使用类。

接下来，您正在从另一个事件处理程序中添加事件处理程序。如果您要更改事件处理程序中的所有ID以及相应的选择器，您最终会复合事件。

复合事件的含义是，如果将两次相同的处理程序添加到元素中，它将触发两次。

使用事件委派会更容易。在#submit

的当前点击处理程序之外设置您的事件委托

   $(document).on('click', '.ddSubmit', function() {....});

现在，至于如何处理实例，在每个事件处理程序this中都是作为事件目标的元素。使用$(this)和jQuery遍历方法，您可以使用目标的父级和兄弟姐妹或您需要做的任何事情。

我建议你将每个级别包装在容器中以简化遍历。我将调用容器类row，以便来自事件目标的通用遍历看起来像：

var someField=  $(this).closest('.row').find('.someField');

单击删除按钮时，只需删除父行

即可

分别更改相似的附加元素

1 个答案: