Question

我正在页面上使用jQuery UI＆＃39; Tabs widget。使用documented activate event，函数内部应该有两个对象event和ui。在Chrome，Firefox，Safari和Internet Explorer 11中，ui对象已满。但是，在IE10及更低版本中，该对象大多是空白的。我的面板上有data个属性，用于激活我需要通过ui对象访问的每个选项卡中的特定内容，但这些属性都在IE10及更低版本中失败。

请考虑以下代码：

<script>
$(document).ready(function() {
    $('#community-areas').tabs({
        activate: function(event, ui) {
            console.log(ui.newPanel[0].dataset.latitude);
            console.log(ui.newPanel[0].dataset.longitude);
        }
    });
});
</script>

<div id="community-areas">
    <ul>
        <li><a href="#tab-1">Tab 1</a></li>
        <li><a href="#tab-2">Tab 2</a></li>
    </ul>
    <div id="tab-1" data-communityid="water" data-latitude="29.266" data-longitude="-81.1379"></div>
    <div id="tab-2" data-communityid="break" data-latitude="29.0516" data-longitude="-81.029"></div>
</div>

在Chrome，Firefox，Safari和IE11中，此代码将成功记录纬度和经度。但是，在IE10及更低版本中，跟随错误显示在控制台中：

SCRIPT5007：无法获得属性＆＃39;纬度＆＃39;未定义或null 参考

为IE添加console.log(JSON.stringify(ui));（因为IE不允许您遍历控制台中的对象），它输出：

{"oldTab":{"0":{},"length":1,"prevObject":{"0":{},"1":{},"2":{},"3":{},"4":{},"length":5,"prevObject":{"0":{},"length":1,"prevObject":{"0":{},"length":1,"prevObject":{"0":{},"context":{},"length":1},"context":{},"selector":"ol,ul"},"context":{}},"context":{},"selector":"> li:has(a[href])"},"context":{}},"oldPanel":{"length":0,"prevObject":{"0":{},"context":{},"length":1},"context":{},"selector":"#tab-2"},"newTab":{"0":{},"length":1,"prevObject":{"0":{},"context":{},"length":1},"context":{}},"newPanel":{"0":{},"length":1,"prevObject":{"0":{},"context":{},"length":1},"context":{},"selector":"#tab-1"}}

有没有人看过这种行为并知道如何解决它？

如果还有其他类似的问题，我道歉。谷歌搜索＆＃34; ui＆＃34;因为＆＃34; ui＆＃34;在＆＃34; jQuery UI＆＃34;。

Answer 1

只有IE＆gt; = 11支持dataset属性，旧版本支持使用jQuery data。

参考：http://caniuse.com/dataset

代码：

$(document).ready(function () {
    $('#community-areas').tabs({
        activate: function (event, ui) {
            console.log($(ui.newPanel[0]).data('latitude'));
            console.log($(ui.newPanel[0]).data('longitude'));
        }
    });
});

演示：http://jsfiddle.net/IrvinDominin/Xzm8K/1/

jQuery UI选项卡 - 在IE10及更低版本中激活不返回“ui”的事件

1 个答案: