javascript - jQuery 在 IE8 上追加奇怪的行为

Question

当我尝试通过单击按钮 IE8 将元素添加到 div 时，在我第二次按下它之前不要添加它。然后它添加了两个新元素。这是代码:

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

容器的标记如下:

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

单个元素标记如下所示:

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

这是一个屏幕截图 - 也许有了它会更容易理解。 http://joxi.ru/RFBeUtg5CbBaNyCgm14jquery的版本是1.9.1

Answer 1

我遇到了类似的问题。尝试这些步骤(无特定顺序):

1. 在event.preventDefault()

   之后放入event.stopPropagation()

2. 改为使用 html()(或尝试其他变体，例如 insertAfter())

3. 使用 $('body').append(...) 然后使用 element.offset 将其定位在正确的高度和左侧。最后一个对我有用。这很痛苦，但 IE8 也是如此。

这是我的代码(我使用一个事件对象来获取偏移量，您可以使用 jQuery 的 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
});