Error "Uncaught TypeError: Failed to execute 'animate' on 'Element': Valid arities are: [1], but 4 arguments provided." on dynamic input field

Question

I'm trying to create a form dynamically using jquery with the following code

function createFieldSet(dataArray) {
    var fieldset = $('fieldset');

    $.each(dataArray, function(key, value) {
        for(var key in value) {
            if (key.toLowerCase() === "other") {
                fieldset.append($('<button/>').attr({ type: 'button', name:'btn_' + key, value: key}).on('click', 'textOther', function() {alert('click');}).html(value[key]));
                fieldset.append($('<input/>').attr({ type: 'text', name:'textOther', value: ""}).hide);
            } else {
                fieldset.append($('<button/>').attr({ type: 'button', name:'btn_' + key, value: key}).html(value[key]));
            }

            fieldset.append('<br />');
        }
    });     
}

but returns an error shown in the title, pointing to the second line that appends the input line, which I'm trying to have hidden on creation unless the button created above is clicked. Was wondering why I'd get something referring to animate when I didn't call such a function, and if this is fixable/doable....or if this should have been done in a server side language.

Answer 1

The issue is the missing parentheses on hide, here

fieldset.append(
    $('<input/>').attr({ 
        type: 'text', 
        name:'textOther', 
        value: ""
    }).hide
);

should be

fieldset.append(
    $('<input/>').attr({ 
        type: 'text', 
        name:'textOther', 
        value: ""
    }).hide()
);

but it's a funky syntax and you should be writing it

fieldset.append(
    $('<input />', { 
        type  : 'text', 
        name  : 'textOther', 
        value : ""
        css   : {
            display : 'none'
        }
    })
);

The reason it happens is because jQuery has the following internal function

jQuery.each([ "toggle", "show", "hide" ], function( i, name ) {
    var cssFn = jQuery.fn[ name ];
    jQuery.fn[ name ] = function( speed, easing, callback ) {
        return speed == null || typeof speed === "boolean" ?
            cssFn.apply( this, arguments ) :
            this.animate( genFx( name, true ), speed, easing, callback );
    };
});

where jQuery is actually looking for the property hide, and it picks it up somehow from you adding .hide to the object, I won't search the source any further for exactly why it's happening, as it's just a typo on your part really, and not that interesting.