Question

我有非常简单的形式，里面有一些jQuery。我想要做的是显示文本输入如果我在选择字段中选择特定选项。在该输入中，我希望能够在我的选择字段中添加新选项。它工作正常，除非我尝试多次使用它。这是第一次没问题。第二次，它为我添加了空值和标签的附加选项字段。第三次，它添加了两个空选项字段。等等...

我试图弄清楚它为什么会发生。这里是代码预览和演示： http://jsfiddle.net/rx5orekb/ HTML：

<form action="#" class="source">
    <select id="source">
        <option value="none">None</option>
        <option value="source-xyz">Source XYZ</option>
        <option value="something-else">Something Else</option>
        <option value="add-new">Add New Source</option>
    </select>
    <input type="text" placeholder="Type name and hit enter" value="" style="display: none" />
</form>

JS：

var Form = {
    addNewSource: function(form, select, newSource) {
        select.hide();
        newSource.show().focus();

        form.on('submit', function(event) {
            event.preventDefault();
            var label = newSource.val(),
                html = '<option value="'+label+'">'+label+'</option>';

            select.show().find('option[value=add-new]').before(html);
            select.val(label);
            newSource.hide().val('');
        });
        return false;
    },

    sourceAppendix: function() {
        var select = $('.source').find('select');

        select.on('change', function() {
            var v = $(this).val(),
                form = $(this).parents('.source'),
                newSource = form.find('input');

            if(v == 'add-new') {
                Form.addNewSource(form, $(this), newSource);
            }
        });
    }
}

$(document).ready(function() {
    Form.sourceAppendix();
});

非常感谢！

Answer 1

每次调用addNewSource()时，都会绑定另一个submit处理程序。因此，如果您调用addNewSource 4次，单击提交按钮将运行提交处理程序4次。并且每个都将为选择添加另一个选项。

我不确定在将新选项添加到菜单之前等待提交事件要完成的是什么，所以我不确定如何更正代码。您可能只想立即添加新选项：

addNewSource: function(form, select, newSource) {
    select.hide();
    newSource.show().focus();
    var label = newSource.val(),
        html = '<option value="'+label+'">'+label+'</option>';
        select.find('option[value=add-new]').before(html);
},

.submit()处理程序应绑定在顶层，而不是addNewSource内。

Answer 2

请参阅http://jsfiddle.net/rx5orekb/1/

这种情况正在发生，因为每次在选择中都有一个新的更改事件，您将绑定到表单提交。第一次点击'添加新'你绑定到表单提交，第二次'添加新'被选中你绑定到表单提交第二次，依此类推。

使用

 form.unbind('submit');

取消绑定表单上的提交。

当我触发JS时，为什么这个select会添加额外的空选项？

2 个答案: