Question

我试图通过ajax显示qtip popup但没有成功。我得到了以下代码，但似乎无法检测出错了。非常感谢帮助。

<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

我有类似的问题;它似乎与 $（＆＃39; .myclass＆＃39;）。qtip（{}）不能引用多个元素这一事实有关。如果它（例如你的例子）你需要在每个（function（））块中包装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
});

Answer 2

有一些问题可能会对你有所帮助 here

和qtip网站上的教程本身 here

我没有看到任何其他原因，如果你按照书面的方式做所有事情，它就不会起作用

QTip2 ajax popup无法正常工作

2 个答案: