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

Question

我在页面上使用 jQuery UI 的 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：无法获取未定义或 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"}}

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

如果还有其他类似的问题，我深表歉意。由于“ui”在“jQuery UI”中，因此带有“ui”的 Google 搜索会掩盖结果。

Answer 1

dataset 属性仅在 IE >= 11 中受支持，对于旧版本支持，请改用 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/