3

我在表格中的项目上调用了 qTip..

$('#orders_table a[rel]').each(function (){
            $(this).click(function(){
                return false;
            }); 
            $(this).qtip({
                content: {
                    // Set the text to an image HTML string with the correct src URL to the loading image you want to use
                    text: 'Loading...',
                    url: $(this).attr('rel'),
                    // Use the rel attribute of each element for the url to load
                    title: {
                        text: 'Order Number ' + $(this).text(),
                        // Give the tooltip a title using each elements text
                        button: 'Close' // Show a close link in the title
                    }
                },
                position: {
                    corner: {
                        target: 'bottomMiddle',
                        // Position the tooltip above the link
                        tooltip: 'topMiddle'
                    },
                    adjust: {
                        screen: true // Keep the tooltip on-screen at all times
                    }
                },
                show: {
                    when: 'click',
                    solo: true // Only show one tooltip at a time
                },
                hide: 'unfocus',
                style: {
                    tip: true,
                    // Apply a speech bubble tip to the tooltip at the designated tooltip corner
                    border: {
                        width: 0,
                        radius: 4
                    },
                    name: 'light',
                    // Use the default light style
                    width: 570 // Set the tooltip width
                }
            })
        });

然后我有以下回调函数：

$('#orders_table a[rel]').each(function (){

            $(this).qtip({
            api: {
                onContentLoad:function() {
                        $('#select').change(function(){

                                alert('test');
                        });    
                }
            }                         
            })
        });

qTip 正在加载动态内容。该动态内容有一个 ID 为“选择”的选择框。

但由于某种原因，它似乎没有在 qTip 加载动态内容之后调用该函数。

有任何想法吗？我试过onRender 和onContentUpdate，好像不太合适。

谢谢！

4

3 回答 3

1

实际上对于不同的Control，它需要一个特定的手段不同的ID。因此，尝试使用不同的 ID 意味着在动态创建控件时传递一些参数并使 Id 不同。

它可能会解决你的问题。

于 2010-10-13T10:00:06.157 回答
0

问题不在于回调运行，它正在加载具有特定 ID 的内容。ID 在一个页面中是唯一的，所以在这里使用一个类，这样当加载多个 qTip 时，它不会使唯一 ID 规则无效（导致#select返回这些元素中的第一个，而不是全部） .

您可以通过将您的选择更改为有一个类（或者如果它是<select>内容中唯一的一个类）来做到这一点，如下所示：

<select class="mySelect">

然后在绑定时，在回调中搜索该元素，如下所示：

$('#orders_table a[rel]').each(function (){
  $(this).qtip({
    api: {
      onContentLoad:function() {
        this.elements.content.find('select.mySelect').change(function() {
          alert('test');
        });    
      }
    }                         
  });
});

此外，如果您出于其他原因不需要循环，则.each()可以将其缩短为：

$('#orders_table a[rel]').qtip({
  api: {
    onContentLoad:function() {
      this.elements.content.find('select.mySelect').change(function() {
        alert('test');
      });    
    }
  }
});
于 2010-10-13T09:36:40.927 回答
0

我不能 100% 确定这是否与我们遇到的问题相同，但是当您将 qTip 的锚点设置为 ajax 链接时，并且该 ajax 链接触发了自身的重新渲染，qTip 最终会在 DOM 中无根回调和计时器停止工作。

我们通过将 qTip 锚定到附近的元素来解决这个问题。希望有帮助。

于 2010-10-13T06:20:10.980 回答