Question

我正在学习Jquery。我有一个普遍的问题，这是我遇到的相当多的问题。现在，我知道之前已经发布了类似的问题，但没有一个我可以直接适用于我的情况。我已经阅读了jQuery文档但没有能够收集到明确的答案（但这可能是由于我的新手状态）

在这里。

让我们在你的页面上说你有一个div，而在其他地方你有一个按钮。您按下按钮，新内容加载到div中。

现在假设您在该div中有按钮，其中主题与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

关于你的第一个问题：

现在让我们假设你在那个与他们有联系的div中有按钮到ajax电话。必须做什么，以确保那些按钮，何时通过第一个ajax调用重新加载，都绑定了自己的ajax调用正常。

正如你所说，这是代表团。这个问题：Event binding on dynamically created elements?处理这种情况。但实质上，您将事件绑定到文档或正文并委托给动态添加的选定元素。通常，我会向要添加的元素添加一个类，这样您就不会绑定到dom中的每个其他类似元素，例如

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

对于第二个问题，您需要使用ajax callback中的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]');
 });

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

1 个答案: