我发现 JQuery 的 $.tmpl() 渲染在不同的浏览器中差别很大。主要是 IE 版本。当下面的代码放置在更新面板中时,它会引发该.appendTo("#divList");
方法的错误。
对此有什么解决方法 - 下面的代码示例
Mozilla:成功
IE浏览器模式(IE9 Compat View),文档模式(IE9标准):SUCCESS
IE浏览器模式(IE9),文档模式(IE9标准):SUCCESS
IE浏览器模式(IE8),文档模式(IE9标准):SUCCESS
IE浏览器模式(IE7),文档模式(IE9标准):SUCCESS
IE浏览器模式(*),文档模式(IE8标准):FAIL(无渲染)
IE浏览器模式(*),文档模式(IE7标准):FAIL
IE浏览器模式(*),文档模式(Quirks模式):FAIL
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script type="text/javascript">
$(function () {
var a = [
{ actor: 'hanks', film: 'yo mama' },
{ actor: 'banks', film: 'men can swim' },
{ actor: 'will', film: 'men can swim' },
{ actor: 'jlo', film: 'ooogh aah' },
{ actor: 'jlo', film: 'bright yellow shadows' }
];
$('#txDibaba').live("keyup", function () {
$("#divList").empty();
$('#PM_tmpl').tmpl(blep(a, 'actor', $(this).val())).appendTo("#divList");
});
});
function blep(arr, prop, value) {
return $.grep(arr, function (item) { return item[prop] == value });
}
</script>
<script id="PM_tmpl" type="text/x-jquery-tmpl">
<tr>
<td style="width:60%;text-decoration:underline;cursor:pointer;">${name} ${strength} ${film}</td>
<td style="width:200px;"> ${actor} </td>
</tr>
</script>
<form id="form1" runat="server">
<input type="text" id="txDibaba" />
<br />
<div id="divList" style="border:1px solid black; width:400px; padding:2px;">
</div>
</form>
强制IE9模式有意义吗?