TD 内的 DIV - 都带有 qTip。单击 DIV 时会显示两个 qtip答案

【问题标题】：DIV inside TD - both with qTip. Both qtips are shown when clicking DIVTD 内的 DIV - 都带有 qTip。单击 DIV 时会显示两个 qtip
【发布时间】：2014-03-26 09:39:34
【问题描述】：

我有一张大桌子，里面有很多单元格，其中一些单元格里面有divs。

如果用户直接点击一个单元格，则应该显示另一个 qtip，而不是点击div。

这是我的代码：

$('#table').on('click', 'td', function(event){ click_td(event); });    

function click_td(e) {

        if ( $(e.target).hasClass('div') )
        {
            var content = tip1_conent(e);

            $(e.target).qtip({
                overwrite: false,
                content: {text: content},
                show: {
                    solo: true,
                    event: 'click',
                    ready: true
                },
                hide: {
                    fixed: true,
                    inactive: 3000
                }
            }, e);
        }
        else
        {
            var td = (e.target.localName=='td')?$(e.target):$(e.target).parents('td');            
            var content = tip2_conent(e);

            $(e.target).qtip({
                overwrite: false,
                content: {text: content},
                show: {
                    solo: true,
                    event: 'click',
                    ready: true
                },
                hide: {
                    fixed: true,
                    inactive: 3000
                }
            }, e);
        }
}

问题：

当我使用此代码时 - 在一系列点击后（即在 DIV，然后是 TD，然后是 DIV）两个 qtip 将同时显示。
如果我在隐藏事件中销毁工具提示：

事件：{ 隐藏：函数（）{ $(this).qtip('destroy', true); } }

我会在 jquery.min 的 FF 控制台中收到很多错误：

TypeError: this.options 为空
TypeError: o 为空

页面上有数百个元素的最有效方法是什么？

UPD_1：http://jsfiddle.net/EcStud/Gfkg4/ - 这是 jsfiddle 版本

【问题讨论】：

请问您能否生成一个 jsfiddle.net 版本的问题，因为它有助于破译您的意思？例如，如果 DIV 已经是 div 元素，为什么还要测试它？这没有任何意义，但也许您的 HTML 标记有真正的 div 类？
您的问题非常广泛。您想确保一次只显示一个工具提示吗？你想要一个高性能的解决方案吗？显示后是否需要销毁工具提示？请澄清。
jsfiddle.net/EcStud/Gfkg4 - 这是 jsfiddle 版本
是的。我不会只显示一个工具提示。但是当我点击 DIV 时，TD 的工具提示也会触发。如果我在隐藏后尝试销毁每个工具提示 - 我会收到错误消息。

标签： jquery qtip

【解决方案1】：

var oQtip;

$('#table').on('click', 'td', function(event){ click_td(event); });

函数 click_td(e) {

    if( oQtip )
    {
          if( oQtip.is(':visible') )
          {
              oQtip.hide();
          }
    }
    if ( $(e.target).hasClass('div') )
    {
        var content = tip1_conent(e);

        oQtip = $(e.target).qtip({
            overwrite: false,
            content: {text: content},
            show: {
                solo: true,
                event: 'click',
                ready: true
            },
            hide: {
                fixed: true,
                inactive: 3000
            }
        }, e);
    }
    else
    {
        var td = (e.target.localName=='td')?$(e.target):$(e.target).parents('td');            
        var content = tip2_conent(e);

        oQtip = $(e.target).qtip({
            overwrite: false,
            content: {text: content},
            show: {
                solo: true,
                event: 'click',
                ready: true
            },
            hide: {
                fixed: true,
                inactive: 3000
            }
        }, e);
    }

}

【讨论】：