Question

我在其中一个jquery ui标签（第一个）中有一个表（jqGrid）。此表具有服务请求，这些服务请求在该表中标识为链接。按下链接后，他们应该将详细的服务请求信息打开到第一个后面的新选项卡中。

我遇到的问题是，当您在新选项卡中打开其中一个服务请求并关闭它时，将选项卡的数量重置为托管该表的选项卡数量;尝试再次打开服务请求将导致服务请求信息打开到新选项卡，该选项卡等于先前关闭的先前选项卡的数量。

准确地说，如果我们有#ui-tab-1，点击其中的服务请求链接，会将服务请求信息打开到#ui-tab-2。现在，关闭#ui-tab-2标签并点击其他服务请求链接将导致#ui-tab-2与新标签#ui-tab-3一起激活。 #ui-tab-2托管新打开的故障单信息。

我使用scrollableTabs v2.0插件/图层来处理可滚动的标签。

这是我正在使用的代码

var $third_l_tabs = $('#table-nav').tabs({
    show: function(event, ui) {
        //we only care about the first tab which hosts the grid.
        if (ui.index == 0) {
            tableToGrid('#' + table_id, {
                defaults: {
                    recordtext: "View {0} - {1} of {2}",
                    emptyrecords: "No records to view",
                    loadtext: "Loading...",
                    pgtext: "Page {0} of {1}"
                },
                loadonce: true,
                height: 'auto'
            });
            jQuery('#' + table_id).trigger('reloadGrid');
        }

        $(ui.panel).on('click', "td[role='gridcell'] a", function(event) {
            //here where the addition of new tab fails.
            $third_l_tabs.tabs('add', this.href, $(this).find('b').text());  
            event.preventDefault();
        });
    },
})

我正在检查jQuery ui调用堆栈，我注意到这些选项卡的show()函数是针对每个这些未经验证的已关闭的旧选项卡调用的！

这是我在Chrome中获得的跟踪，你可以看到最后3行，show再次被重复调用

$.tabs.show() at scp.js:580
$.Widget._trigger() at jquery-ui-1.8.17.custom.js:581
$.widget._tabify.showTab() at jquery-ui-1.8.17.custom.js:7195
$.widget._tabify() at jquery-ui-1.8.17.custom.js:7282    <-- it starts from here
jQuery.extend.dequeue() at jquery-1.7.1.js:2066
jQuery.fn.extend.dequeue() at jquery-1.7.1.js:2098
jQuery.extend.each() at jquery-1.7.1.js:658
jQuery.fn.jQuery.each() at jquery-1.7.1.js:271
jQuery.fn.extend.dequeue() at jquery-1.7.1.js:2097
$.widget._tabify.hideTab() at jquery-ui-1.8.17.custom.js:7211
$.widget._tabify() at jquery-ui-1.8.17.custom.js:7278
jQuery.extend.dequeue() at jquery-1.7.1.js:2066
jQuery.fn.extend.dequeue() at jquery-1.7.1.js:2098
jQuery.extend.each() at jquery-1.7.1.js:658
jQuery.fn.jQuery.each() at jquery-1.7.1.js:271
jQuery.fn.extend.dequeue() at jquery-1.7.1.js:2097
$.widget.load() at jquery-ui-1.8.17.custom.js:7544
$.widget._tabify() at jquery-ui-1.8.17.custom.js:7285
jQuery.event.dispatch() at jquery-1.7.1.js:3256
jQuery.event.add.elemData.handle.eventHandle() at jquery-1.7.1.js:2875
jQuery.event.trigger() at jquery-1.7.1.js:3144
jQuery.fn.extend.trigger() at jquery-1.7.1.js:3781
jQuery.extend.each() at jquery-1.7.1.js:658
jQuery.fn.jQuery.each() at jquery-1.7.1.js:271
jQuery.fn.extend.trigger() at jquery-1.7.1.js:3780
$.xui.tabs.$.extend._create.hiddenOn.right() at jquery.scrollabletab.js:101
jQuery.event.dispatch() at jquery-1.7.1.js:3256
jQuery.event.add.elemData.handle.eventHandle() at jquery-1.7.1.js:2875
jQuery.event.trigger() at jquery-1.7.1.js:3144
jQuery.fn.extend.trigger() at jquery-1.7.1.js:3781
jQuery.extend.each() at jquery-1.7.1.js:658
jQuery.fn.jQuery.each() at jquery-1.7.1.js:271
jQuery.fn.extend.trigger() at jquery-1.7.1.js:3780
$.Widget._trigger() at jquery-ui-1.8.17.custom.js:578
$.widget.add() at jquery-ui-1.8.17.custom.js:7411
(anonymous function)() at jquery-ui-1.8.17.custom.js:421
jQuery.extend.each() at jquery-1.7.1.js:658
jQuery.fn.jQuery.each() at jquery-1.7.1.js:271
$.widget.bridge.$.fn.(anonymous function)() at jquery-ui-1.8.17.custom.js:418
$.tabs.show() at scp.js:581
jQuery.event.dispatch() at jquery-1.7.1.js:3256
jQuery.event.add.elemData.handle.eventHandle() at jquery-1.7.1.js:2875

对于可能出现的问题的任何帮助将不胜感激。我在此问题中加入了JSFiddle示例。

Answer 1

在event.stop()之后添加event.preventDefault()。请参阅http://jsfiddle.net/neo108/pY3pJ/1/

由于某种原因，该事件被多次触发。添加event.stop()以阻止事件第二次被触发，依此类推......

创建新的时，将再次显示已关闭的jquery UI选项卡

1 个答案: