Issue with adding elements to a div in IE8: The element is not added until the button is clicked twice, resulting in two new elements being added at once. Here's the code snippet in question:
$(options.addButton).click(function(event) {
var prototype = $(options.prototypeContainer).attr('data-prototype');
event.preventDefault();
var fileField = $(prototype.replace(/__name__/g, fieldCount));
fieldCount++;
$(options.uploadingImagesWrapper).append(fileField);
//fileField.slideDown();
return false;
});
The structure of the container is as follows:
<div id="uploading-component-images">
<!-- New elements are inserted here -->
</div>
<!-- Button triggering the insertion function -->
<a class="btn" href="#" id="add-another-image">{{'label.component.add_image_field'|trans }}</a>
Here is the markup for a single element:
<div class="image-file-field">
<input type="file" name="{{ full_name }}[file]" id="{{ id }}" />
<button type="button" class="offset0_5 remove-image btn btn-mini">
<span class="icon-remove"></span>
</button>
</div>
A screenshot for better understanding can be found here: Version of jQuery used: 1.9.1