2017-02-14 120 views
0

我使用的引導標籤的節目時,我使用shown事件檢測標籤的變化,在一個場景我想這甚至表示要取消,所以我用了preventDefault()功能如下:取消引導標籤

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    var target = $(e.target).attr("href") // activated tab 
    if(target === '#mise-en-page' || target === '#widgets'){ 
     if($('.page-name-input').length > 0){ 
      var nonEmpty = $('.page-name-input').filter(function(){ 
       return this.value != ''; 
      }); 
      if(nonEmpty.length==0){ 
       e.preventDefault(); 
       console.log('Error !!'); 
      }else{ 
       console.log('OK'); 
      } 
     }else{ 
      console.log('OK'); 
     } 
    }; 
    }); 

在這種情況下,preventDefault()函數不起作用,即使我在控制檯上打印了'Error !!'消息,我仍然可以在選項卡之間導航。

我該如何解決這個問題?

編輯:

這是一個的jsfiddle其中preventDefault()不與顯示事件工作。一旦標籤已被證明

http://jsfiddle.net/xFW8t/2426/

+0

您是否試過'show.bs.tab'事件? – ZimSystem

+0

我不確定您是否可以對這些自定義事件使用preventDefault,並且我沒有看到引導程序文檔提及此事。如果這不是直接可能的,那麼我想你可以重寫它來通過一個自定義的點擊處理程序來觸發你的標籤(所以在觸發鏈接上沒有'data-toggle'),然後在這個點擊處理程序中決定你是否想要顯示選項卡還是不顯示。 – CBroe

+0

@ZimSystem是的,我試過了,你可以檢查我附加的jsfiddle。 –

回答

1

,它的發生是因爲小提琴不正確包括bootstrap.js

當JS包含在e.preventDefault工作正常..

http://www.codeply.com/go/FiyO9EGNC0(CSS,JS & jQuery的全部納入W/Codeply)

由於數據屬性,標籤仍然無法使用js,但事件將無法正常運行,因此無法使用bootstrap.js

Updated fiddle

2

shown.bs.tab被激發。爲了避免你應該聽上一步驟中的默認行爲,嘗試這樣的:

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) { 
    //your stuff 
}); 

雖然我不知道你是否就可以防止自定義庫的默認行爲。 PreventDefault旨在用於非定製語言的默認行爲。

+0

我不敢說,我已經嘗試過'show'事件,但是它並不妨礙默認行爲,當我調用'preventDefautl()' –

+0

檢查我編輯的帖子:) –