jquery show popover如果輸入的值爲空

Question

請幫我解決這個問題。我有很少的輸入，當輸入不重點和輸入的值是空的時，我想用警告顯示彈出窗口。

這是我所做的。但其行爲不正確。 另請參閱FIDDLE。

要重現我的錯誤，請按照下列指示：

• 關注輸入1，然後unfocuse它。 Popover顯示並且 沒關係。
• 在輸入＃1中鍵入內容，然後不重點。沒有 彈出窗口，也沒關係
• 在輸入＃2中鍵入內容，然後不重點，沒有 popover也沒關係。
• 再次關注輸入＃1，這裏是彈出窗口，即使是輸入的 值也不是空的！

我在哪裏錯了？提前致謝！

$('input').blur(function(){ 
    if(!$(this).val()) { 
     $(this).popover({ 
      title: 'Warning!', 
      content: 'Value can not be empty', 
      placement: 'bottom' 
     }).popover('show'); 
    } else { 
     $(this).popover('hide'); 
    } 
}) 

Answer 1

Instand使用popover('hide')你應該使用popover('destroy')的。因爲hide只是隱藏它，但它仍然是一個popover。所以它會出現在Mouseover/Focus上。

$('input').blur(function(){ 
    if(!$(this).val()) { 
     $(this).popover({ 
      title: 'Warning!', 
      content: 'Value can not be empty', 
      placement: 'bottom' 
     }).popover('show'); 
    } else { 
     $(this).popover('destroy'); 
    } 
}) 

嘗試，因爲Fiddle

Answer 2

此外，而不是檢查!$(this).val()，你可以有$(this).val() == ''

$('input').blur(function(){ 
    if($(this).val() == '') { 
     $(this).popover({ 
      title: 'Warning!', 
      content: 'Value can not be empty', 
      placement: 'bottom' 
     }).popover('show'); 
    } else { 
     $(this).popover('destroy'); 
    } 
}) 

Answer 3

酥料餅('hide')只是隱藏，使用('destroy')。

詳情請參見上酥料餅的所有方法：

http://www.tutorialspark.com/twitterBootstrap/TwitterBootstrap_Popover_Javascript_Method_destroy.php