Question

我试图从头开始制作一个jQuery Form构建器，但我遇到了一些问题。

向表单生成器添加新字段时，它可以正常工作，但是当您尝试添加新字段时，它会追加新字段加1。如果再试一次，那么它会添加3个元素等。代码在函数内部，然后在文档准备就绪时调用。

我花了这么多时间，并没有清楚地知道问题出在哪里（对不起）

function addField() {
    var formAddField = $("#form-add-field");
    var formConstructorForm = $("#form-constructor-form");
    var addFieldButton = $("#add-field-button");
    var fieldLabelName = $("#field-label-name");
    var formGenerated = $("#form-generated");
    var formGeneratedForm = formGenerated.find("form");
    var fieldIdForm = $("#field-id-form");
    var fieldTypeSelect = $("#field-type-select");
    var inputTypeForm = $("#input-type-form");
    var inputTypeSelect = $("#input-type-select");
    var field = '';
    var label = '';
    var inputGroup = '';

    formAddField.on("click", function (e) {
        e.preventDefault();

        addFieldButton.addClass("disabled");
        formConstructorForm.addClass("show");

        fieldTypeSelect.on("change", function () {
            var fieldTypeSelected = fieldTypeSelect.val();

            switch (fieldTypeSelected) {
                case 'input':
                    inputTypeForm.show();
                    addFieldButton.removeClass("disabled");
                    field = '<input class="validate" id="' + fieldIdForm.val() + '" type="' + inputTypeSelect.val() + '">';
                    break;
                case 'select':
                    inputTypeForm.hide();
                    addFieldButton.removeClass("disabled");
                    field = '<select id="' + fieldIdForm.val() + '"></select>';
                    break;
                case 'textarea':
                    inputTypeForm.hide();
                    addFieldButton.removeClass("disabled");
                    field = '<textarea class="materialize-textarea" id="' + fieldIdForm.val() + '"></textarea>';
                    break;
            }
        });

        addFieldButton.on("click", function (e) {
            e.preventDefault();
            label = '<label for="">' + fieldLabelName.val() + '</label>';
            inputGroup = '<div class="input-field col s12">' + '\n' + field + '\n' + label + '\n' + '</div>';
            formConstructorForm[0].reset();
            formConstructorForm.removeClass("show");
            $(inputGroup).appendTo(formGeneratedForm);
        });
    });
}

这里有完整的jsfiddle及其功能，以及何时被调用。

有人能帮我一把吗？谢谢！

Answer 1

您的代码中的问题是，每次按下按钮时都会添加额外的点击事件。在下面更新的小提琴中，它将删除之前的侦听器，然后再添加新的侦听器。

它可能不是完美的解决方案，但可以解决您的问题。

  addFieldButton.off('click');
  addFieldButton.on("click", function(e) {
    e.preventDefault();
    label = '<label for="">' + fieldLabelName.val() + '</label>';
    inputGroup = '<div class="input-field col s12">' + '\n' + field + '\n' + label + '\n' + '</div>';
    formConstructorForm[0].reset();
    formConstructorForm.removeClass("show");
    $(inputGroup).appendTo(formGeneratedForm);
  });

https://jsfiddle.net/5d7poco0/

Answer 2

每次按addfield按钮更改

时，您都会发送约束事件

 addFieldButton.on( "click", function(e) {

以下

addFieldButton.unbind('click').on( "click", function(e) {

修改

更好的方法是使用on和off而不是使用bind unbind方法，如果您使用的版本大于jQuery v1.7

jQuery以递归方式添加元素

2 个答案: