单击表格行应打开一个精美框

Question

我尝试打开一个通过单击表行上任意位置触发的 fancybox。单击一行后，我在 Firebug 控制台中看到以下消息：

递归过多 http://code.jquery.com/jquery-1.7.js 2925行

这是我的 HTML：

<table id="allItems">
    <tr class="itemRow">
        <td><a href="http://www.google.com" class="foo">foo</a></td>
        <td>bar</td>
    </tr>
    <tr class="itemRow">
        <td><a href="http://www.bing.com" class="foo">bar</a></td>
        <td>bar</td>
    </tr>
</table>

这是我的 javascript：

var itemRow = $('#allItems tr.itemRow');

itemRow.click(function(e){
    e.preventDefault();  
    $(this).find('.foo').trigger('click');
});


$('.foo').fancybox({
    'href' : $(this).attr('href'),
    'width'             : '100%',
    'height'            : '100%',
    'autoScale'         : false,
    'transitionIn'      : 'none',
    'transitionOut'     : 'none',
    'type'              : 'iframe'
});

您可以在这里找到一个实例：http://jsfiddle.净/svebal/zQ8FZ/

Answer 1

.trigger() 在一些浏览器/jquery 插件上非常不可靠。你想做：

var itemRow = $('#allItems tr.itemRow');

itemRow.click(function(e) {
    e.preventDefault();
    $.fancybox({
        'href': $(this).find('.foo').attr('href'),
        'width': '100%',
        'height': '100%',
        'autoScale': false,
        'transitionIn': 'none',
        'transitionOut': 'none',
        'type': 'iframe'
    });
});

Answer 2

实际上，您需要的唯一脚本是：

$('.foo').click(function(){
    $.fancybox({
            'href' : this.href,
            'width'             : '100%',
            'height'            : '100%',
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'iframe'
    });
    return false;
});

Answer 3

如果您想在单击 tr 上的任何 td 后显示灯箱，则必须更改此行：

 $(this).find('.foo').trigger('click');

对此，

 $(this).next().find('.foo').trigger('click');

这将找到下一个元素下类为 foo 的元素