同一页面上的多个Ajax调用:从Ajax加载的div中进行Ajax调用

Question

我正在学习Jquery。我有一个一般性的问题，这是我经常遇到的问题。现在，我知道以前也发布过类似的问题，但没有一个我可以直接应用于我的情况。我已经阅读了jQuery文档，但无法收集到明确的答案（但这可能是由于我的新手身份）

给你。

比方说，在你的页面上有一个div，在其他地方有一个按钮。你按下按钮，新的内容就会加载到分区中。

现在假设您在div中有按钮，它们本身链接到ajax调用。必须做的是，确保这些按钮在被第一个ajax调用重新加载时，正确地绑定到它们自己的ajax调用。

现在让我具体一点。

我有一个div，里面放着在我的问答网站上关注一个问题的成员的照片。当我通过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

对于您的第一个问题：

现在假设你在这个div中有按钮，它们本身是链接的到ajax调用。一个人必须做什么，以确保这些按钮，当由第一个ajax调用重新加载，绑定到自己的ajax调用正确地

正如你所说，这是代表团。这个问题：动态创建的元素上的事件绑定？处理这种情况。但本质上，您将事件绑定到文档或主体，并委托给动态添加的选定元素。通常，我会在添加的元素中添加一个类，这样就不会绑定到dom中的其他类似元素，例如

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

对于第二个问题，您需要在ajax load中使用callback参数。一旦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]');
 });