Question

The code below adds a link to an upload field. For each new click it shows a new upload field to the form up to a total 5. There are no errors in Chrome etc.

I would like to know what is wrong with the line below as it seems the script works well on other browsers but on IE8 it throws an error: Object doesn't support this action. Can you suggest alternative code?

<div id="edit-submitted-file1-ajax-wrapper" style="display: block;">
    //upload field here
</div>
<a id="addmore" href="#">[+] Add more</a>

<div id="edit-submitted-file2-ajax-wrapper" style="display: block;">
    //upload field here
</div>

<div id="edit-submitted-file3-ajax-wrapper" style="display: block;">
    //upload field here
</div>

etc

first = $('.webform-client-form').find('div[id$="-ajax-wrapper"]').first();
        first.after('<a id="addmore" href=#>[+] Add more</a>');
        $('.webform-client-form').find('div[id$="-ajax-wrapper"]').each(function(){
            $(this).hide();
            first.show();
        });

var c = 0;
$('#addmore').bind('click', function(e) {
    //HERE BELOW IS THE LINE WITH ERROR
    item = $('#edit-submitted-file'+ c +'-ajax-wrapper');
    item.show();
    ++c;
    if (c == 5) {
        $('#addmore').hide();
        return false;
    }
});

Answer 1

Change this

item = $('#edit-submitted-file'+ c +'-ajax-wrapper');

to this

var item = $('#edit-submitted-file'+ c +'-ajax-wrapper');

http://jsfiddle.net/fJ3EG/2/