Question

升级到jQuery UI 1.10.0后，标签不再正常工作。有时单击选项卡会生成刷新窗口，其中包含对MVC操作的ajax调用的内容。所以看起来在ui-tabs事件之前调用了锚事件???

HTML code：

...
<div id="rightTabsPanel">
    <ul>
        <li class="tab-shadow"><a href="@Url.Action("Agenda", "Home")">Agenda</a></li>
        <li class="tab-shadow"><a href="@Url.Action("Twitter", "Home")">Twitter</a></li>
        <li class="tab-shadow"><a href="@Url.Action("Buienradar", "Home")">Buienradar</a></li>
        <li class="tab-shadow"><a href="@Url.Action("FileKaart", "Home")">File kaart</a></li>
    </ul>
</div>
...

我的javascript代码：

    $(document).ready(function(){
    ...
    $("#rightTabsPanel").tabs({
        //Replacement for cache:false 
        beforeLoad: function( event, ui ) {
            if ( ui.tab.data( "loaded" ) ) {
                event.preventDefault();
                return;
            }

            ui.jqXHR.success(function() {
                ui.tab.data( "loaded", true );
            });
        },
        beforeActivate: function (event, ui) {
            if (ui.oldTab.text() == "Twitter" || ui.oldTab.text() == "Yammer") {
                $("#slider-code", ui.oldTab).empty();
            }
            else if (ui.oldTab.text() == "File kaart") {
                fileKaartDeInitialize(ui.oldPanel);
            }
        }
    }).bind('tabsload',function(event, ui){ 
          if (ui.tab.text() == "Agenda") {
              var $this = $('#slider-code', ui.panel);

              $this.tinycarousel({ axis: 'y', interval: true, controls: false, intervaltime: 7000 })
          }
          else if (ui.tab.text() == "Twitter") {
            var $this = $('#slider-code', ui.panel);

            $this.tinycarousel({ axis: 'y', interval: true, controls: false, intervaltime: 5000 })
         }
          else if (ui.tab.text() == "Buienradar") {
            var $this = $('#slider-code', ui.panel);
        }
          else if (ui.tab.text() == "File kaart") {
              fileKaartInitialize($('.fileKaartPage'));
        }
    });

   $("#rightTabsPanel .ui-tabs-nav li").unbind();
   ...
}

仔细阅读jQuery UI 1.10 Upgrade Guide后，我可以修复代码中的一些小错误，但上述错误仍然存在。

我的问题： - 升级到jQuery UI 1.10后有没有人遇到同样的问题？ - 有没有人有解决方案或想法来解决这个问题？

Answer 1

你并不孤单。使用NuGet包升级到JQuery 1.9.1和JQuery UI 1.10.0后，我遇到了同样的问题。所以，至少你知道这个问题不是你的项目所特有的。选项卡正确呈现，但单击时，它们直接将URL发送到浏览器，而不是通过Ajax检索内容。我对JQuery比较陌生，所以我还没有调试背景来深入了解它。

代码示例（显然就像它在这里一样简单）：

<div id="tabs">
<ul>
    <li><a href="/AllWorkTab">All Work</a></li>
    <li><a href="/MyWorkTab">My Work</a></li>
    <li><a href="/PhotoTab">Photos</a></li>
    <li><a href="/WeatherTab">Weather</a></li>
</ul>

<script type="text/javascript">
    $(function () {
        $("#tabs").tabs();
    });
</script>

Answer 2

对我来说，答案是在其他一些依赖的JavaScript库中。依赖库代码中的错误会缩短页面上的JQuery执行。我相信这是“Microsoft JQuery Unobtrusive Ajax”软件包，之后需要升级。

使用ASP.NET MVC 4的jQuery UI 1.10.0选项卡：有时选项卡将作为锚点触发

2 个答案: