在同一頁面上的多個Ajax調用：從Ajax調用的Ajax調用div

Question

我正在學習Jquery。我有一個普遍的問題，這是我遇到的很多問題。現在，我知道之前已經發布過類似的問題，但沒有一個可以直接應用於我的情況。我已閱讀jQuery文檔，但無法收集明確的答案（但這可能是由於我的新手狀態）

這是它。

讓我們說你的網頁上有一個div，其他地方有一個按鈕。你按下按鈕，新的內容加載到div中。

現在讓我們說你在那個div中有哪些THEMSELVES鏈接到ajax調用的按鈕。必須做些什麼，以確保這些按鈕在被第一個Ajax調用重新加載時，都會正確綁定到它們自己的ajax調用。

現在讓我具體。

我有一個div，用於保存在我的Q/A網站上提出問題的成員的照片。當我將鼠標懸停在這些照片上時，通過ajax將他們的信息從數據庫中提取出來並顯示在工具提示上。

但是，在同一頁上的其他地方是「按此線程」按鈕。如果我按下此按鈕，div將重新加載，現在我的照片與div一起以及其餘所有內容。但現在工具提示不會工作，直到我刷新。我知道它與綁定（或代表團）有關，但我很難將其解決。

我完全明白這是一個簡單的問題 - 但如果有人能解釋這一點，我會非常感激。它是一個在我的網站周圍出現的問題。

這裏是我的兩個功能，

我的後續線程函數：

$(document.body).on("click", "#follow", function(){ 
    var followed_id = $('#followed_id').val(); 

    $.ajax({ 
    url: '../ajax/follow_this_member.php', 
    type: 'post', 
    data: { 
      'followed_id': followed_id 
      }, 
      success: function(html){ 

       $('.stats_member_profile').load('profile_stats.php', {id:followed_id}); 
       $('.follow_and_message').load('follow_and_message_buttons.php', {id:followed_id}); 
       } 
      }); 
     return false; 
    }); 

我的提示功能（qtip插件）

$(function(){ 

$('img[data]').qtip({ 
    content: { 
     text: function(event, api) { 
      $.ajax({ 
       url:'../ajax/tooltip_members.php', // Use data-url attribute for the URL 
       method: 'post', 
       data: { 
         id: $(this).attr('data') 
       } 
      }) 
       .then(function(content) { 
        // Set the tooltip content upon successful retrieval 
        api.set('content.text', content); 
       }, function(xhr, status, error) { 
        // Upon failure... set the tooltip content to the status and error value 
        api.set('content.text', status + ': ' + error); 
       }); 

      return 'Loading...'; // Set some initial text 
     } 
    }, 

    style: { classes: 'member_summary_box_style' } 

    }); 

}); 

Answer 1

關於第一個問題：

現在，讓我們說你有在按鈕t div哪些THEMSELVES鏈接到ajax調用 。必須做的是確保這些按鈕在第一次調用ajax時重新加載 ，並將它們自己的ajax調用 正確綁定。

這就是代表團，就像你說的那樣。這個問題：Event binding on dynamically created elements?處理這種情況。但實質上，您將事件綁定到文檔或主體，並將其委託給動態添加的選定元素。通常，我會爲要添加的元素添加一個類，以便不綁定到dom中的其他任何類似元素，例如，

$(document).on('click', 'button.followme', function() {.....}); 

關於第二個問題，你需要使用callback參數在你的Ajax load。這個回調函數將執行一次load已完成和DOM已更新：

.load(<url>, <data>, <callback>); 

在你的榜樣

所以，讓我們繼續前進的qtip創建成一個函數：

function createQtip(selector) { 
    $(selector).qtip({ 
     content: { 
      text: function(event, api) { 
       $.ajax({ 
        url:'../ajax/tooltip_members.php', // Use data-url attribute for the URL 
        method: 'post', 
        data: { 
          id: $(this).attr('data') 
        } 
       }) 
        .then(function(content) { 
         // Set the tooltip content upon successful retrieval 
         api.set('content.text', content); 
        }, function(xhr, status, error) { 
         // Upon failure... set the tooltip content to the status and error value 
         api.set('content.text', status + ': ' + error); 
        }); 

       return 'Loading...'; // Set some initial text 
      } 
     }, 

     style: { classes: 'member_summary_box_style' } 

     }); 
} 

// Create the qTips against the images loaded on initial page load 
$(function(){ 
    createQtip('img[data]'); 
}); 

，並在加載數據的時候，在回調中添加qTips：

$('.stats_member_profile').load('profile_stats.php', {id:followed_id},function() { 
     // Create qTips for any images now in the DOM under the element with class .stats_member_profile 
     createQtip('.stats_member_profile img[data]'); 
}); 
$('.follow_and_message').load('follow_and_message_buttons.php', {id:followed_id},function() { 
     // Create qTips for any images now in the DOM under the element with class .follow_and_messsage 
     createQtip('.follow_and_message img[data]'); 
});