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

您不需要绑定鼠标悬停：它已经由qtip插件完成。使用绑定会在第一次鼠标悬停事件时对事件产生“冲突”。简单地说，使用jQuery .hover代替bind：

    $(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}
                });
            }
        });
    });
});

用户配置文件使用ajax显示不正确

3 个答案: