Jquery qtipが同じターゲットに対して複数回表示されないようにするにはどうすればよいですか？

Question

私はsvgノードをクリックしてqtipを表示してajax呼び出しを行う次のコードを用意しました。しかし、同じ要素（ターゲット）を何度もクリックすると、同じターゲットのqtipsは読み込まれません。私は何が欠けていますか？

$(document).ready(function() { 
         $('image').click(function() { 
          var $img = $(this); 

          $(this).qtip({ 
           content: 'Loading...', 
           style: { 
            border: { 
             width: 5, 
             radius: 10 
            }, 
            padding: 10, 
            textAlign: 'center', 
            tip: true, // Give it a speech bubble tip with automatic corner detection 
            name: 'cream' // Style it according to the preset 'cream' style 
           }, 
           hide: { delay: 2000 }, 
           show: { 
            when: 'click', // Don't specify a show event 
            ready: true, // Show the tooltip when ready 
            solo: true 
           }, 
           position: { 
            corner: { 
             tooltip: 'bottomRight', // Use the corner... 
             target: 'bottomLeft' // ...and opposite corner 
            } 
           }, 
           api: { 
            // Retrieve the content when tooltip is first rendered 
            onRender: function() { 
             var self = this; 
             self.content = ''; 
             $.ajax({ 
              url: window.location.href, 
              type: 'POST', 
              data: 'call=ajax&uid=' + $img.attr('data-uid'), 
              success: function(resp) { 
               self.updateContent(resp); 
              } 
             }); 
            }, 
            onContentUpdate: function() { 
             var self = this; 
            } 
           } 
          }); 
         }); 
        }); 

注：jquery.qtip-1.0.0-rc3.min.jsを使用しています。どんな助けもありがとう。

Answer 1

qtipの初期化は、clickイベントではなく1回呼び出す必要があります。これは通常、ドキュメントが読み込まれたときに実行されます。

要素をフーバーするとヒントが表示されます。

show: { 
    when: { 
     event: 'click' 
    } 
} 

完全初期化：

$(function() { 
    $('image').qtip({ 
     content: 'Loading...', 
     style: { 
      border: { 
       width: 5, 
       radius: 10 
      }, 
      padding: 10, 
      textAlign: 'center', 
      tip: true, // Give it a speech bubble tip with automatic corner detection 
      name: 'cream' // Style it according to the preset 'cream' style 
     }, 
     hide: { delay: 2000 }, 
     show: { 
      when: { 
       event: 'click' 
      }, 
      ready: true, // Show the tooltip when ready 
      solo: true 
     }, 
     position: { 
      corner: { 
       tooltip: 'bottomRight', // Use the corner... 
       target: 'bottomLeft' // ...and opposite corner 
      } 
     }, 
     api: { 
      // Retrieve the content when tooltip is first rendered 
      onRender: function() { 
       var self = this; 
       self.content = ''; 
       $.ajax({ 
        url: window.location.href, 
        type: 'POST', 
        data: 'call=ajax&uid=' + $img.attr('data-uid'), 
        success: function(resp) { 
         self.updateContent(resp); 
        } 
       }); 
      }, 
      onContentUpdate: function() { 
       var self = this; 
      } 
     } 
    }); 
});