javascript - Jquery 添加表单，适用于 JSFiddle，但在生产中不起作用

Question

大家好，这可能是一个非常愚蠢的错误，但我使用 jquery 将表单集添加到页面，它还会做其他事情，例如更新表单的数量，但这似乎不是问题。

http://jsfiddle.net/b5Y8f/

$(document).ready(function () {
function updateElementIndex(el, prefix, ndx) {
    var id_regex = new RegExp('(' + prefix + '_set-\\d+-)');
    var replacement = prefix + '_set-' + ndx + '-';
    if ($(el).attr("for")) $(el).attr("for", $(el).attr("for").replace(id_regex, replacement));
    if (el.id) el.id = el.id.replace(id_regex, replacement);
    if (el.name) el.name = el.name.replace(id_regex, replacement);
}

function changeDeleteForms(el, prefix, formid) {
    var idstring = 'id_' + prefix + '_set-' + formid + '-DELETE';
    //$('<input>').attr({type: 'hidden', id: 'id_' + idstring, name: idstring}).appendTo('.command-delete');
    $('#' + idstring).prop('checked', true);
}

function deleteForm(btn, prefix) {
    var formCount = parseInt($('#id_' + prefix + '_set-TOTAL_FORMS').val());
    if (formCount > 1) {
        // Delete the item/form
        $(btn).parents('.command').hide();
        $(btn).parents('.command').attr('class', 'command-delete');
        var dc = $(".command-delete");
        $(dc).children().children().children().each(function () {
            var formid = this.id.match(/\d+/g);
            changeDeleteForms(this, prefix, formid);
            //$(this).val("");
        });
        var forms = $('.command'); // Get all the forms
        var formsdelete = $('.command-delete'); // Get all the forms 
        var fl = parseInt(forms.length);
        var fdl = parseInt(formsdelete.length);
        var finalcount = fl + fdl
        // Update the total number of forms (1 less than before)
        //$('#id_' + prefix + '_set-TOTAL_FORMS').val(forms.length);
        var i = 0;
    } // End if
    else {
        alert("Please enter atleast 1 command for this item.");
    }
    return false;
}

function addForm(btn, prefix) {
    var formCount = parseInt($('#id_' + prefix + '_set-TOTAL_FORMS').val());
    var maxCount = parseInt($('#id_' + prefix + '_set-MAX_NUM_FORMS').val());
    var forms = parseInt($('.command-delete').length); // Get all the forms 
    var newcount = formCount + forms;
    // You can only submit a maximum of 10 todo items
    if (newcount < maxCount) {
        // Clone a form (without event handlers) from the first form
        var row = $(".command:first").clone(false).get(0);
        // Insert it after the last form
        $(row).removeAttr('id').hide().insertAfter(".command:last").slideDown(300);

        // Remove the bits we don't want in the new row/form
        // e.g. error messages
        $(".errorlist", row).remove();
        $(row).children().removeClass("error");

        // Relabel or rename all the relevant bits
        $(row).children().children().children().children().each(function () {
            updateElementIndex(this, prefix, newcount);
            $(this).val("");
        });

        // Add an event handler for the delete item/form link 
        $(row).find(".delete").click(function () {
            return deleteForm(this, prefix);
        });
        // Update the total form count
        $("#id_" + prefix + "_set-TOTAL_FORMS").val(newcount + 1);
    } // End if
    else {
        alert("Sorry, you can only enter a maximum of 1000 items.");
    }
    return false;
}
// Register the click event handlers
$("#add").click(function () {
    return addForm(this, "itemcommands");
});

$(".delete").click(function () {
    return deleteForm(this, "itemcommands");
});

$('.command input:checkbox').hide();

});

如果您转到上面的链接，您可以看到代码运行良好，它会更新表单计数并在 ID 中添加带有新编号的新表单，以及当您第一次单击添加命令按钮时在生产中添加的所有内容3 次它没有显示，但是代码已经输入到页面中并且表单在技术上存在但没有显示。

在您第四次按下该按钮时，该按钮起作用并且该行已添加到元素中的最后一个('.command')之后。

是什么导致它在 JSFiddle 上运行但在生产环境上不起作用？

----------------更新------------------------

似乎如果我删除隐藏在前 3 次按下按钮时不显示的 3 的溢出，它将在正确的位置显示它们。

为什么 overflow 不会从前 3 个表单行中删除，但其余的在 fine 之后？

--------------------更新------------------------ --我认为我已经找到了问题并且它与 JQUERY 完全无关它似乎是 Bootstrap 响应布局隐藏了表单我认为如果我将它们专门添加到它们自己的行我可以解决这个问题。

感谢大家的帮助。

Answer 1

我在你的文件中没有看到 src="*jQuery source*"。由于 JSFiddle 已经将源代码添加到文件中，您可能忘记将其放入。