JQuery插件qTip2 - 點擊顯示僅在第一次使用第一個元素時

我有一個頁面上有一些DIV。每當點擊DIV時我想顯示qTip2。由於我正在使用qTip做的其他一些事情，如果可能的話，我想重複使用同一個。JQuery插件qTip2 - 點擊顯示僅在第一次使用第一個元素時

所以，我用qTip2演示作爲出發點，並且據我所知我完全重複了它。但問題依然存在：它僅在第一個被點擊的元素上顯示qtip - 第一次。它會在所有其他元素上顯示多次，但第一次只是第一次。

有沒有人跑過來，並有補救措施？

下面是我創建的一個示例應用程序的代碼展品問題：

CSS：

#Container { border: 1px solid black; } 
#Container > DIV { float: left; border: 2px outset silver; margin: 5px; } 
#Container > DIV:nth-last-child(1) { float: none; border: none; height: 1px; overflow: hidden; margin: -1px 0 0 0;}

的JavaScript：

var Container; 
var ContainerEndItem; 
$(document).ready(function() { 
Container = $('#Container'); 
if(Container.length == 0){ 
    alert("Container not found!"); 
    return; 
} 

var addLinks = $('.TipTarget'); 
$('<div>Test</div>').qtip({ 
      content : 'Test', 
      position: { 
       target: 'mouse', // Use the triggering element as the positioning target 
       adjust: { mouse: false, method: 'flip' }, 
       my: 'left center', 
       at: 'right center', 
       effect: true // Enable default 'slide' positioning animation 
      }, 
      show: { 
       target: addLinks, 
       event: 'click', 
       delay: 0 
      }, 
      hide: { 
       event: 'none' 
      }, 
      events: { 
       show: function (event, api) { 
        // Update the content of the tooltip on each show 
        var target = $(event.originalEvent.target); 

        if(target.length) { 
         api.set('content.text', 'Looking at: ' + target.text()); 
        } 
       } 
      } 
     }); 
});

HTML：

<div id="Container"> 
    <div id="Apples" class="TipTarget">Apples</div> 
    <div id="Watermelons" class="TipTarget">Watermelons</div> 
    <div id="Peaches" class="TipTarget">Peaches</div> 
    <div id="Meat" class="TipTarget">Meat</div> 
    <div id="Clear" style="clear: both">&nbsp;</div> 
</div>

的JQuery ：1.8.3

qTip2：2.0.1

這裏有一個的jsfiddle與此完全相同的設置： http://jsfiddle.net/Dracorat/Z3WqC/

請注意，如果通過單擊蘋果，然後西瓜，桃子，然後，然後蘋果，西瓜，然後，再開始桃子並且不斷重複，蘋果公司將僅在第一時間展示該技巧。其他人會展示出來，直到奶牛回家。

請注意，如果您刷新並從西瓜開始，它將只顯示第一次，但其餘的將顯示每一次。

我做錯了什麼？

（我已經使用「每個」結構試過 - 它並沒有改變行爲的話）

謝謝！

來源

2013-06-20 Dracorat

我發現的另一個怪癖，如果你這樣做：'調整：{鼠標：真，方法：'翻轉'}，它工作正常 – stackErr

不知道爲什麼，但似乎第一個顯示的對象有它的事件被移除（並不總是 - 如果你設置show'event：'mousemove''它似乎正在工作）。它也適用於任何事件，如果你在首次演出後觸發隱藏事件：例如。 http://jsfiddle.net/Z3WqC/4/ – xjedam

我會着迷於內存泄漏（如果可以的話，可能會自行修補它）。至於其他兩條評論，我無法使工具提示關閉本身或基於鼠標移動，因爲我在工具提示中實際使用的內容是一種表單元素，它根據用戶如何使用頁面進行更新。（這就是爲什麼我使用相同的工具提示多個地方。） – Dracorat

只是我編輯代碼時發現的東西。如果您將代碼更改爲：

adjust: { mouse: true, method: 'flip' },

該工具提示正常工作。

來源

2013-06-24 17:14:06 stackErr

正如指出的那樣，事實證明，如果你有以下三件事情一致：'target：'mouse''，'adjust：{mouse：false}'並且沒有隱藏事件或'none'隱藏事件，那麼qTip2添加了一個自定義隱藏事件，可以消除第一個顯示事件。我可以通過將目標更改爲「event」來解決問題。 stackErr的回答指出我正確的方向，所以我接受它！謝謝！ – Dracorat

@Dracorat謝謝你，但你做了大部分工作。 – stackErr

不過，你指出了正確的方向。此外 - 你不能「收回」賞金，所以我不妨獎勵它！ – Dracorat

JQuery插件qTip2 - 點擊顯示僅在第一次使用第一個元素時

回答

相關問題