2015-10-14 87 views
1

我正在使用Bootstrap js彈出窗口顯示帶有鏈接的html列表。但我有麻煩抓住了他們的鏈接被點擊了jQuery選擇時:單擊Bootstrap彈出窗口中的鏈接

爲酥料餅的元素:

<span class="popoverSpan" data-style="listPopovers" data-html="true" data-container="body" data-placement="bottom" data-trigger="focus" data-toggle="popover" tabindex="0" data-original-title="" title="">Menu</span> 

<div> 
    <ul id="forPopover" class="dropdown-menu popover-content"> 
     <li id="List_3" class="subgroups"> 
      <a id="aInner">Students</a> 
     </li> 
     <li id="" class="subgroups"> 
      <a id="bInner">Teachers</a> 
     </li> 
    </ul> 
</div> 



$(".popoverSpan").popover({ 
     html: true, 
     content: function() { 

      return $('#forPopover').html(); 
     } 
    }); 


$('body').on('click', '.subgroups a', function (event) { 
     alert('a'); 
    }); 

我上面的酥料餅的HTML和jQuery和引導代碼下面。警報('a')是間歇性的。爲什麼會出現這種情況,我該如何解決?謝謝。

+1

你可以創建一個小提琴嗎? –

+1

你能告訴我你在找什麼東西......這裏是我創建的小提琴http://jsfiddle.net/sandenay/mfnevhon/ –

+0

上面的小提示顯示了我的意思。它不會一直工作:http://screencast.com/t/BzAW0tgaRDok – cdub

回答

5

這對OP來說有點遲,但我自己碰到了這個(我在Bootstrap v3.2上)。問題是data-trigger="focus"

如果你看the description in the docsfocus也被描述爲「忽略下一次點擊」,其結果包括點擊彈出窗口本身,甚至點擊彈出窗口中的鏈接。因此,點擊製作引導程序之間的競賽將取消彈出窗口和點擊事件到達鏈接並實際打開新頁面。

我個人認爲做focus駁回上的下一個點擊酥料餅的任何地方會更直觀。

無論如何,我可以看到兩種解決方案。首先是將data-trigger設置爲手動,然後重新實現focus,但不要關閉點擊是否在彈出窗口上。

另一種是更哈克一點,但如果添加的延遲,與data-delay="500"或最好.popover(delay: {show: 0, hide: 500}),那麼延遲給人的單擊事件時解僱經過前打開該網頁。後者只會延遲關閉,因爲他們會查看新頁面,如果您不需要,延遲不是問題。注:理論上你也應該可以做data-delay="{show: 0, hide: 500}",但我無法得到這個工作。

第二種解決方法既快速又簡單,並且不必要的延遲不應太大,但請注意,在某些條件下(更快/更慢的機器,差異瀏覽器),總是有機會間歇性地遇到計時問題, 誰知道?)。所以它可能會在CI或其他方面失敗。延遲越高,出現問題的機率就越小(例如,我嘗試了50次,但實際上它從未爲我工作過),但是,這會導致很大的延遲。

+1

我希望我可以upvote這兩次。我能夠通過這樣做來獲得屬性:'data-delay ='{「show」:0,「hide」:250}''但我使用的是Bootstrap v3.3.7,所以也許這只是他們固定的東西同時。無論如何,謝謝你。 – patrickmcgraw