CODEWITHSUNDEEP
javascriptjqueryhtmlcssinternet-explorer-8
Paul Seleznev
Paul Seleznev

Reputation: 682

jQuery append strange behavior on IE8

When I try to add element to the div by clicking the button IE8 don't add it until I press it the second time. Then it adds two new elements. Here is the code:

$(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 markup of the container goes like this:

<div id="uploading-component-images">
    <!-- here I inserts new elements -->
</div>

<!-- the button the triggers insertion function -->
<a class="btn" href="#" id="add-another-image">{{'label.component.add_image_field'|trans }}</a>

And the single element markup looks like this:

<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>

Here is a screenshot - maybe with it it will be more easy to understand. http://joxi.ru/RFBeUtg5CbBaNyCgm14 The version of jquery is 1.9.1

Upvotes: 1

Views: 204

Answers (2)

Tone
Tone

Reputation: 990

I had a similar problem. Try these steps (in no particular order):

  1. put in event.stopPropagation() after event.preventDefault()

  2. use html() instead (or try other variations, like insertAfter())

  3. use $('body').append(...) and then use element.offset to position it in with the correct height and left. This last one worked for me. It's a pain but then so is IE8.

Here's my code (I'm using an event object to get offset, you can get the same behaviour using jQuery's offset()):

var overflow = $('#overflowContainer');
var windowScrollTop = $(window).scrollTop(); // if window scrolled then need to minus    this from the height so that menu stays in correct place
var target = $($event.currentTarget);
var offset = target.offset();
var dd_top = ((offset.top + target.outerHeight()) - windowScrollTop);
$('body').append(overflow); // must append it to the body for IE to work                        
var left = target.offset().left;
overflow.css({                            
   "top": dd_top + "px",
    "position": "fixed", 
    "left": left // right-aligned with right border of overflow container
});

Upvotes: 1

Phoenix
Phoenix

Reputation: 753

Remove event.preventDefault(); or move it below the append sentense.

Upvotes: 0

Related Questions