Question

我尝试通过这个jQuery插件执行Ajax工具提示：http://jquery.bassistance.de/tooltip/demo/

我有这样的事情：

<p id="foottip">
  <span href="/last_votes/6">footnote</span>.
</p>

<script type="text/javascript">
  $(function() {
    $("#foottip span").tooltip({
      bodyHandler: function() {
        //dj ajax here and cache
        var tip = ''
        var url = $(this).attr("href");

        $.ajax({
          url:url, success:function(html){tip = html;}, async:false
        });

        return tip
      },

      showURL: false
    });
  })
</script>

我使用异步Ajax请求来执行此操作，但解决方案存在问题，有时会重定向页面。这似乎是一个错误。如何使用异步请求执行Ajax工具提示？我无法找到将结果异步传递给工具提示的方法。

Answer 1

我对抗同样的问题。发现了一个聪明的技术here，它在bodyHandler回调中动态创建一个元素，然后在AJAX调用中更新它以巧妙地实现所需的效果。

适用于上述问题：

$("#foottip span").tooltip({
    bodyHandler: function() {
        var url = $(this).attr("href");
        var tip = $("<span/>").html("loading tip...");

        $.ajax({
            url: url,
            success: function(html){ tip.html(html); }
        });

        return tip;
    },
    showURL: false
});

Answer 2

是的，您的代码无法以异步方式运行：

var tip = ''
var url = $(this).attr("href");
$.ajax({
    url:url, success:function(html){tip = html;}, async:true
});

// -- The problem here is that your bodyHandler function will return
// -- immediately, before the AJAX callback is called.
return tip

要解决此问题，您可能必须将工具提示呈现代码放在success请求的$.ajax回调中。

jQuery Ajax工具提示

2 个答案: