新しいjquery UIタブが再び表示されます。

Question

jquery uiタブ（最初のタブ）の1つにテーブル（jqGrid）があります。このテーブルには、そのテーブル内のリンクとして識別されるサービス要求があります。リンクが押されると、詳細なサービスリクエスト情報が最初のタブに続く新しいタブに表示されます。

私が抱えている問題は、サービスリクエストの1つを新しいタブで開き、それを閉じて、タブの数をテーブルをホストするものにリセットすることです。サービス要求を再度開こうとすると、以前に閉じられた以前のタブの数と等しい新しいタブにサービス要求情報が開かれます。

正確には#ui-tab-1がある場合は、その中のサービスリクエストリンクをクリックすると、#ui-tab-2にサービスリクエスト情報が表示されます。今すぐ#ui-tab-2タブを閉じて別のサービスリクエストリンクをクリックすると、新しいタブ#ui-tab-3と一緒に#ui-tab-2がアクティブになります。 #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行を見ることができるように、ショーは

$.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.preventDefault()の後にevent.stop()を追加すると、このトリックが行われました。参照してくださいhttp://jsfiddle.net/neo108/pY3pJ/1/

何らかの理由でイベントが複数回トリガーされています。 event.stop()を追加して、イベントが2回目などにトリガされるのを止めてください。