javascript - 用户配置文件显示未正确使用 ajax

Question

当我在鼠标悬停时触发 ajax 时，用户配置文件没有显示，但是当我第二次将鼠标悬停在它上面时，它正在显示。我使用工具提示来显示用户个人资料。

请更正我的代码

$(document).ready(function(){
    $(".user_profile").bind("mouseover",function(){
      id = $(this).attr('id')
      user_id=id.split('_')[1];
    $.ajax({
        url: "/admin/inbox/user_profile",
        data: {user_id : user_id},
        success: function(data){
            $("#"+id).qtip({
                content:{
                    text: data,
                    title:{
                        text: "User Profile"
                    }
                },
                style: {name:'blue', tip:true}
            });
        }
    });
}); 

});

Answer 1

因为$.ajax是异步的，所以mouseover事件会在 qtip 创建之前返回。

当页面加载时，您可以运行$.ajax以提取页面中预先显示的所有用户配置文件的数据，将此数据存储在一个数组中，然后使用已填充数组中的数据创建每个 qtip。

Answer 2

我已经解决了这个问题

我已阅读解决方案：

“因为 $.ajax 是异步的，所以 mouseover 事件会在 qtip 创建之前返回。

当页面加载时，您可以运行 $.ajax 来提取页面中预先显示的所有用户配置文件的数据，将这些数据存储在一个数组中，然后使用已经填充的数组中的数据创建每个 qtip。"

$(document).ready(function(){
var i=0,j=0;
$(".user_profile").each(function(){
    id = $(this).attr('id')
    user_id=id.split('_')[1];
    my_user_ids[i++]=user_id;
    my_ids[j++]=id;
});
$.each( my_ids, function(index, value){
  $.ajax({
    url:"/admin/inbox/user_profile",
    data: {user_id : my_user_ids[index]},
    success: function(data){ 
      myArray[value]=data;
      $("#"+my_ids[index]).qtip({
        content:{
          text: myArray[my_ids[index]],
          title:{
            text: "New User's Profile"
          }
        },
        show: 'mouseover',
        hide: 'mouseout',
        style: {name:'blue', tip:true}
      });  
     }
   });
  });
});  

Answer 3

您不需要绑定 mouseover：它已经由 qtip 插件完成。使用绑定，您会在第一次鼠标悬停事件时对事件产生“冲突”。您应该简单地使用 jQuery .hover 而不是绑定来解决：

    $(document).ready(function() {
    $(".user_profile").hover(function() {
    {
        id = $(this).attr('id')
        user_id=id.split('_')[1];
        $.ajax({
            url: "/admin/inbox/user_profile",
            data: {user_id : user_id},
            success: function(data) {
                $("#"+id).qtip({
                    content: {
                        text: data,
                        title: {
                            text: "User Profile"
                        }
                    },
                    style: {name:'blue', tip:true}
                });
            }
        });
    });
});