動的に追加された要素のjquery qtip

Question

jqueryの「qtip」ツールチッププラグインを使いこなしていますが、私のWebページに（ajax経由で）動的に追加された要素にqtip機能を追加しようとしていますが、どうやって？私はどこかで私のjqueryの "ライブ"を使用する必要があると思うが、どこを知らない。

助けがあれば助かります。

Heres a jsfiddleに私のジレンマがあります。既存の3つのリンクでqtipがうまく機能していることがわかりますが、[リンクの追加]をクリックして作成したリンクにカーソルを合わせると、 "qtip" CSSクラスがあるのにツールチップは表示されません。

javascriptボックスにはボックスへのリンクを動的に追加する関数、qtipプラグイン、最後に "qtip" CSSクラスを持つすべての要素を含むqtipを作成するカスタムコードが含まれています。

以下は私のjquery ajaxコードです。 qtipクラスを使ってqtipsを新しい要素に再適用する方法はわかりません。

function ajaxunitCalendar(X,Y,Z){ 

    $('#ajaxdiv').fadeOut(300,loadcontent); 

    function loadcontent() 
    { 
     var changecal = "<?php echo base_url();?>calendar/unit/" + X + "/" + Y + "/" + Z + " #ajax_calendar_wrap"; 
     $("#ajaxdiv").load(changecal,'',function(){ 
     $('#ajaxdiv').fadeIn(300); 

      return false; 
     }); 

     return false; 
    } 

     return false; 
}; 

Answer 1

おっとは、完全に遅すぎる夜に...という読み違え：P

これは、何が必要です：

http://jsfiddle.net/navgarcha/888ap/3/はちょうどあなたが作成するすべての要素にqtip()プラグインを適用します。あなたはこのフィドルに示されているように要素を追加した後、Qティップを追加

Answer 2

試してみてください。http://jsfiddle.net/888ap/4/

このコード：

$(document).ready(function() { 
     $("#add_link").live('click', function(e) { 


      $('#box').append("<a href='#' class='qtip'>Another Link</a><br/><br/>"); 
      e.preventDefault(); 
      bindQtip(); 
     }); 
     bindQtip(); 
    }); 

function bindQtip() { 
    $(".qtip").qtip({ 
     content: 'Hello!', 
     position: { 
      corner: { 
       target: 'topRight', 
       tooltip: 'bottomLeft' 
      } 
     }, 
     style: { 
      padding: 10, 
      textAlign: 'center', 
      border: { 
       width: 1, 
       radius: 3 
       //color: '#8ACAED' 
      }, 
      tip: 'bottomLeft', 
      name: 'red' // Inherit t 
     } 
    }); 
    }