jQuery 附加在 IE 上不起作用（始终如一）？答案

【问题标题】：jQuery append does not work ( consistently ) on IE?jQuery 附加在 IE 上不起作用（始终如一）？
【发布时间】：2012-04-11 21:05:31
【问题描述】：

我已经构建了一个在 IE 上不起作用的精简示例： http://so.demuyt.net/case1/

(IE8.jQuery 1.7.1)

在 IE 中单击一个日期不会执行任何操作，单击第二个日期会在第一个和第二个选定日期旁边放置一个“绿色药丸”。在 Chrome 中执行此操作将在第一次单击时放置 1 个药丸，在第二次单击时放置 1 个药丸。

我像这样添加一个“药丸”：

$("#canvas").append('<span class="label label-success Workcounter ' + date + ' ' + calendarName + '">1</span>');

我这样放置“药丸”：

$(".Workcounter." + date + '.' + calendarName).position( { of : $(".Work-date-highlight."+calendarName+"."+date) , at : "left top" , offset : "3 3" } );

js 控制台没有错误，我注意到在调试模式下，我会在 Chrome 中看到添加的药丸，而我不会在 IE 中看到它添加（即使我点击第二个日期）。

非常感谢任何帮助或指示，以使 IE 表现得像 Chrome 和 FireFox。

【问题讨论】：

我刚刚在 IE7、IE8、IE9 和 IE10 中进行了测试，它似乎在每一个中都有效。我点击了一个日期，绿色药丸被添加到每个日期的左上角。
@JonathanSampson 没办法.. 所以你点击的第一个日期（只有一个）立即显示药丸，而无需点击第二个日期？
@JonathanSampson 好的，所以我检查了 IE7：有效。 IE8 仅适用于我的“兼容性视图”，您是否打开了它？
我很好奇，如果您自己使用top 和left 而不是position 定位元素，会有所不同吗？
看起来 _updateDatepicker 黑客只在 IE8 中触发了一次。所以，pills.length 保持在“0”。每个其他浏览器都会触发它两次并更新药丸值。

标签： javascript jquery-ui calendar append twitter-bootstrap

【解决方案1】：

你用来定位元素的线似乎是我的问题，尝试替换：

$(".Workcounter." + date + '.' + calendarName).position( { of : $(".Work-date-highlight."+calendarName+"."+date) , at : "left top" , offset : "3 3" } );

与：

var datePos = $(".Work-date-highlight."+calendarName+"."+date).position();

$(".Workcounter." + date + '.' + calendarName).css({
    left: datePos.left - 3,
    top: datePos.top - 3,
    position: 'absolute'
});

【讨论】：

在实际站点中，我确实必须将 .position() 替换为 .offset()，因为日历位于未放置在 (0,0) 的父 div 中。谢谢！