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: Unable to get property 'latitude' of undefined or null reference

为 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"}}

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

如果还有类似的问题，我深表歉意。 Google 搜索中包含“ui”的内容会掩盖结果，因为“ui”位于“jQuery UI”中。

Answer 1

仅 IE >= 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/