jquery - 同一页面多次Ajax调用: Ajax calls from within an Ajax loaded div

Question

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

就是这里了。

假设您的页面上有一个 div，而其他地方有一个按钮。您按下按钮，新内容就会加载到 div 中。

现在假设您在该 div 中有按钮，这些按钮链接到 ajax 调用。必须做什么，以确保这些按钮在由第一个 ajax 调用重新加载时，正确绑定(bind)到它们自己的 ajax 调用。

现在让我具体说明一下。

我有一个 div，其中包含正在关注我的问答网站上的问题的成员的照片。当我将鼠标悬停在这些照片上时，通过 ajax，它们的信息将从数据库中提取并显示在工具提示上。

但是，同一页面上的其他地方有一个“关注此主题”按钮。如果我按此键，div 会重新加载，现在我的照片以及所有其他内容都在 div 中。但现在工具提示在我刷新之前无法工作。我知道这与绑定(bind)(或委托(delegate))有关，但我很难理解它。

我完全明白这是一个简单的问题 - 但如果有人能解释这一点，我将非常感激。这是我的网站上经常出现的一个问题。

这是我的两个函数，

我的关注线程功能:

  $(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

对于你的第一个问题:

Now let say you have buttons in that div which THEMSELVES are linked to ajax calls. What must one do, to ensure that those buttons, when reloaded by the first ajax call, are bound to their own ajax calls properly.

正如您所说，这是授权。本问题:Event binding on dynamically created elements?处理这种情况。但本质上，您将事件绑定(bind)到文档或正文，并委托(delegate)给动态添加的选定元素。通常，我会向要添加的元素添加一个类，这样您就不会绑定(bind)到 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]');
 });