jQuery的動態添加元素qtip

我搞亂jQuery的「qtip」工具提示插件，我試圖添加qtip功能元素是動態添加到我的網頁（通過ajax），但不能圖如何。我想我需要在我的jquery中使用「live」，但不知道在哪裏。jQuery的動態添加元素qtip

任何幫助將是偉大的。

heres a jsfiddle與我的困境。您會注意到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; 
};

來源

2012-01-04 David

你將不得不重新應用插件另一個環節。 – 2012-01-04 01:46:50

哎呦，完全誤解是......太深夜：P

這是你所需要的：http://jsfiddle.net/navgarcha/888ap/3/

的qtip()插件僅僅適用於您創建的所有元素。

來源

2012-01-04 01:34:53 nav

嗯...似乎並沒有這樣做。在框中創建的鏈接仍然沒有工具提示。 – David 2012-01-04 01:42:42

@大衛對不起，有點困 - 嘗試更新 – nav 2012-01-04 01:51:16

真棒。我將如何去將qtip功能添加到從jquery的ajax加載的html？例如，如果「添加鏈接」鏈接從#box中的另一個網頁加載3個與qtip類的鏈接？有沒有辦法將qtips添加到.qtip類的現有和所有未來實例中，無論它們是僅由js創建還是使用ajax加載到dom中？ – David 2012-01-04 01:57:31

嘗試添加QTip你追加爲證明這個小提琴的元素之後：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 
     } 
    }); 
    }

來源

2012-01-04 12:33:03

不完全有效，因爲每當您添加新鏈接時，您將重新將qtip插件重新應用於所有與該類相匹配的插件，當我們有唯一一個我們希望將其應用於已定義和可訪問的插件時。 – nav 2012-01-04 12:40:32

將選擇範圍縮小到新添加的元素。 Live不會幫助你做這件事，它被用來將FUNCTIONS添加到事件中。你需要一個事件來觸發一些附加QTIP的代碼。在我看來，添加qtip最合乎邏輯的地方是點擊#add_link時。 – 2012-01-04 13:01:20

jQuery的動態添加元素qtip

回答

相關問題