Question

我有一个包含大量细胞的大桌子，其中一些细胞内部有div个。

如果用户直接点击某个单元格，则应显示另一个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），两个qtips将同时显示。
如果我在hide事件中销毁工具提示：

事件：{ hide：function（）{ $（this）.qtip（＆＃39; destroy＆＃39;，true）; } }

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

TypeError：this.options为null
TypeError：o为null

在页面上使用数百个元素进行此操作的最有效方法是什么？

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

Answer 1

var oQtip;

$（＆＃39;＃table＆＃39;）。on（＆＃39;点击＆＃39;，＆＃39; td＆＃39;，功能（事件）{click_td（event）;}）;

function 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);
    }

}

TD内部的DIV - 都有qTip。单击DIV时会显示两个qtips

1 个答案: