Question

$(function() {
    $('.challenge').tooltip({html: true, trigger: 'hover'});

    $('.challenge').mouseover(function(){
    var that = $(this);
    var ajaxQueue = $({
    url: "<?=base_url();?>/ajax/challenge_tip",
     type: 'POST',
     cache: true,
     data: {
      'idd': $(this).attr("rel"),
     },
     dataType: 'json',
       success: function(challenge_j) {
         that.tooltip('hide')
        .attr('data-original-title', challenge_j)
        .tooltip('fixTitle')
        .tooltip('show');
       }
  });

  $.ajaxQueue = function(ajaxOpts) {

    var oldComplete = ajaxOpts.complete;

    ajaxQueue.queue(function(next) {

      ajaxOpts.complete = function() {
        if (oldComplete) oldComplete.apply(this, arguments);

        next();
      };

      $.ajax(ajaxOpts);
    });
  };
});
});

这是我第一次使用js，我需要一些帮助。对于工具提示，我使用bootstrap工具提示。当光标悬停在链接上时，脚本将发布数据发送到控制器并接收回调数据。在第一个悬停脚本中接收数据，但工具提示不会弹出，只有第二个悬停。我怎么能解决它？

还有一个问题。 can脚本只会发送请求第一个鼠标悬停，下面的悬停会使用缓存中的信息吗？

抱歉我的英语; D

Answer 1

为ajax查询创建标记。

var isTooltipTextEmpty = true;

$('.challenge').mouseover(function(){

    if(isTooltipTextEmpty) {

     ...add ajax query here)

    }

}

当ajax查询准备就绪时，您需要触发工具提示show事件

.success(data) {

     $('.challenge').show();
     isTooltipTextEmpty = false; //prevents multiple ajax queries

}

在此处查看更多内容：Bootstrap Tooltip

Answer 2

很难测试跨域

以下是我认为你需要的东西

$(function() {
  $('.challenge').tooltip({html: true, trigger: 'hover'});

  $('.challenge').mouseover(function(){
    var that = $(this);
    $.ajax({
     url: "<?=base_url();?>/ajax/challenge_tip",
     type: 'POST',
     cache: true,
     data: {
      'idd': $(this).attr("rel"),
     },
     dataType: 'json',
       success: function(challenge_j) {
         that.tooltip('hide')
        .attr('data-original-title', challenge_j)
        .tooltip('fixTitle')
        .tooltip('show');
       }
    });
  });
});

工具提示脚本。需要更正代码

2 个答案: