在同一页面上的多个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]'); 
});