Нажмите на tablerow, чтобы открыть fancybox

Я пытаюсь открыть fancybox, вызванный щелчком в любом месте строки таблицы. После нажатия на строку я получаю это сообщение в консоли Firebug:

слишком много рекурсии <a href="http://code.jquery.com/jquery-1.7.js" rel="nofollow noreferrer" target="_blank">http://code.jquery.com/jquery-1.7.js</a> Строка 2925

Вот мой HTML:

<table id="allItems">
 <tbody><tr>
 <td><a href="http://www.google.com" target="_blank">foo</a></td>
 <td>bar</td>
 </tr>
 <tr>
 <td><a href="http://www.bing.com" target="_blank">bar</a></td>
 <td>bar</td>
 </tr>
</tbody></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/

3 ответа

.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'
 });
});


На самом деле, единственный скрипт, который вам нужен, это:

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


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

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

к этому

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

это находит элемент, который является классом foo при следующем элементе

licensed under cc by-sa 3.0 with attribution.