Нажмите на таблицу, чтобы открыть коробку

Question

Я пытаюсь открыть необычную коробку, вызванную щелчком в любом месте строки таблицы.После нажатия на строку, я получаю это сообщение в консоли 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.net/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

если вы хотите показать лайтбокс после нажатия любого тд на тр, вы должны изменить эту строку:

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

к этому

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

находит элемент класса foo для следующего элемента

Answer 3

На самом деле вам нужен только один скрипт:

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