將qtip（jQuery插件）應用於第

新加載的項目首先，這是qtip，一個jQuery插件：http://craigsworks.com/projects/qtip2/基本上它使得漂亮的工具提示。將qtip（jQuery插件）應用於第

我在一個mysql數據庫結果頁面上使用qtip，當我第一次加載頁面時qtips工作得很好。但是，我在頁面上排序鏈接，導致div內的信息完全更改（使用AJAX將新信息放入div中，方法是創建一個新的mysql查詢，將數據提供給數據並將其放入表中以替換表上的表這一頁）。當我點擊我的排序按鈕時，除了qtips消失之外，所有東西都可以使用。我在圖像標題（「標題」）上使用qtips，因此當我在已排序的表上翻轉圖像時，它會回到正常的工具提示。

我相信什麼是錯誤的是，$（document）.ready意味着qtip的東西只會加載到第一頁加載，因此當我改變表時，所有的qtips消失。我在qtip論壇上發現了一個似乎與我的問題有關的話題（http://craigsworks.com/projects/forums/thread-solved-reload-qtip-with-new-items），並且我嘗試了該話題中的所有內容，並且我使用的是qtip的最新版本，因此我使用on（）而不是live（），因爲live（）已棄用。它仍然沒有解決它。下面是代碼：

<script type="text/javascript"> 
jQuery(document).ready(function() { 
    $('img[title]').on('mouseover', function() { 
     if(typeof($(this).data('qtip')) == 'object'){ return; } 
     $(this).qtip({ 
      content: { 
       text: false 
      }, 
      style: 'cream', 
      position: { 
       viewport: $(window) 
      } 
     }); 
     $(this).qtip('show'); 
    }); 
}); 
</script>

來源

2012-07-14 JYeh

你做回發到SQL排序結果？因此再次發射document.ready？如果不是，你可能必須在排序後再次分配'this.qtip' – 2012-07-14 03:37:43

我從來沒有聽說過回發，但我會研究它。 – JYeh 2012-07-14 04:15:32

顯示排序結果的代碼 – 2012-07-14 04:16:45

通過存儲qTip設置，它會很容易（重新）initilise qTip與後新的內容相同的設置已被加載。

沒有完全瞄準你的JavaScript的，我不能具體的，但這樣的事情應該這樣做：

jQuery(document).ready(function() { 
    var qtipOptions = { 
     content: { text: false }, 
     style: 'cream', 
     position: { viewport: $(window) } 
    }; 

    $('img[title]').qTip(qtipOptions); 

    $("#myButton").on('click', function(){ 
     $.ajax({ 
      //... 
      //... 
      //... 
      success(function(html){ 
       $("#mySelector").html(html); 
       $('img[title]').qtip('destroy').qtip(qtipOptions); 
      }) 
     }); 
    }); 
});

來源

2012-07-14 09:46:26

我不知道我會如何適合我的代碼到你的。我沒有在qtip中使用ajax，而是使用了這個：http://www.w3schools.com/php/php_ajax_database.asp所以當我點擊排序鏈接時，它會調用另一個頁面查詢數據庫並創建一個替換頁面上的表的表。我試着把在被調用頁面的末尾沒有工作。但也許我沒有正確編寫代碼;我對jQuery很陌生。 – JYeh 2012-07-14 13:54:34

w3schools參考向您展示瞭如何在頁面上使用原生AJAX，但使用jQuery，那麼使用AJAX功能是愚蠢的。學習'jQuery.ajax（）'（以及各種捷徑方法）對於現在和未來的生產力都將是一項巨大的投資。閱讀[文檔]（http://api.jquery.com/jQuery.ajax/），然後返回到我的建議代碼。你會發現它不是「qtip裏面的ajax」，而是「qtip裏面的ajax」 - 更完全的說，AJAX成功處理器中出現了「.qtip（...）」語句。 – 2012-07-14 15:12:35

我閱讀了該文檔，並將我的代碼轉換爲jQuery AJAX，並且它終於可用！：）謝謝。你是對的，這在將來肯定非常有用。 – JYeh 2012-07-14 17:29:53

將qtip（jQuery插件）應用於第

回答

相關問題