jQuery添加表单，可在JSFiddle上工作，但在生产中无法使用

Question

Hi guys this might be a really stupid error but im using jquery to add a formset to a page it also does other things such as updating the number of forms but that does not seem to be a issue.

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();

});

If you go to the link above you can see the code works perfectly fine it update the form count and add the new form with the new number in the id and everything however in production when you click the add command button for the first 3 times it does not show however the code has been enter into the page and the form is technically there but not shown.

on the fourth time you press the button it works and the row has been added after the last ('.command') in the element.

What could be causing it to work on JSFiddle but not on production?

-------------------UPDATE--------------------------

It seems if i remove the overflow hidden from the 3 that dont show when you press the button the first 3 times it will show them in the correct place.

Why would overflow no be removed from the first 3 form rows but the rest after fine?

----------------------UPDATE-------------------------- Think i have found the issue and its nothing to do with the JQUERY at all it seems to be bootstraps responsive layout hiding the forms i think if i add them specifically to their own rows i can fix this.

Thanks for the help though guys.

Answer 1

I don't see a src="*jQuery source*" in your file. Since JSFiddle already adds the source to the file, you may have forgotten to put it in.