QTip2 ajax弹出不起作用

Question

我想通过ajax显示qtip弹出窗口没有成功。我得到了下面的代码，但似乎无法检测到哪里会出错。帮助将不胜感激。

<script type="text/javascript"> 
$(document).ready(function() 
{ 
    $('.tiplink').qtip({ 
     content:{ 
      var id = $(this).attr('rel'); 
      text: '<img class="" src="../images/loader.gif" alt="Loading..." />', 
      ajax:{ 
       url: 'pops.php', 
       type: 'POST', 
       loading: false, 
       data: 'id=' + id 
      } 
     }, 

     show: 'mouseover', // Show it on mouseover 
     hide: { 
      delay: 200, 
      fixed: true // We'll let the user interact with it 
     }, 
     style: { 
      classes: 'ui-tooltip-light ui-tooltip-shadow', 
      width: 290 
     } 
    }); 

}); 
</script> 

<a href="#" class="tiplink" rel='1'>show me the popup1!</a> 
<a href="#" class="tiplink" rel='2'>show me the popup2!</a> 
<a href="#" class="tiplink" rel='3'>show me the popup3!</a> 

Answer 1

周围有一些问题，可以帮助你 here

和qtip的网站 here

教程本身我没有看到任何其他原因，它不应该，如果你的工作尽一切办法写作

Answer 2

我有一个类似的问题;它似乎与以下事实有关：$（'。myclass'）。qtip（{}）不能引用多于一个元素。倘若它（和如你的例子），你需要用的qtip（）的每个（函数（））块中调用...

对于你的榜样，下面应该解决您的问题：

$(document).ready(function() 
{ 
    // the each() call I was explaining above this code example 
    $('.tiplink').each(function(){ 

    // Extract your variables here: 
    var $this = $(this); 
    var id = $this.attr('rel'); 

    // Now make your qtip() call 
    $this.qtip({ 
     content:{ 
     text: '<img class="" src="../images/loader.gif" alt="Loading..." />', 
     ajax:{ 
      url: 'pops.php', 
      type: 'POST', 
      loading: false, 
      data: 'id=' + id 
     } 
     }, 
     show: 'mouseover', // Show it on mouseover 
     hide: { 
     delay: 200, 
     fixed: true // We'll let the user interact with it 
     }, 
     style: { 
     classes: 'ui-tooltip-light ui-tooltip-shadow', 
     width: 290 
     } 
    }); 
    }); // end each(function()) call 
});