Инициировать событие щелчка на внутреннем элементе

Question

Необходимо щелкнуть строку в таблице, где каждая первая ячейка содержит ссылку, и открыть URL-адрес.

<table>
  <tr>
    <td><a class="fancybox" href="detail.aspx?CID=67525">LT5C260A436C41</a></td> 
    <td>more data</td>
  </tr>
  <tr>
    <td><a class="fancybox" href="detail.aspx?CID=17522">LA5C260D436C41</a></td> 
    <td>more data</td>
  </tr>
  ...
</table>

Вся строка должна быть кликабельной, а не только ссылка сверху, откройте страницу сведений в fancybox , то есть на самой странице.

Итак, я попытался сделать что-то вроде этого:

$("table tr").bind('click',function(e) {
    e.stopPropagation();
    $(this).find("a").trigger('click');
});

Но похоже, что событие рецидивирует рекурсивно, что приводит к:

Uncaught RangeError: Превышен максимальный размер стека вызовов

Как я могу инициировать щелчок по полной строке вместо только ссылки надлежащим образом, избегая переполнения стека?

ОБНОВЛЕНИЕ: я действительно ценю ответы ниже, но мой вопрос касается запуска события, а НЕ выполнения поведения внутри этого события. Обходные пути могут быть хорошими, но не в этом случае.

Answer 1

Я смог сделать это, дав каждой ссылке уникальный идентификатор, а затем с помощью jQuery установил событие нажатия этого уникального идентификатора, чтобы перенаправить окно на соответствующую страницу.

Вот мой рабочий пример:http://jsfiddle.net/MarkKramer/F5aMb/2/

А вот и код:

$('#link1').click(function(){
    // do whatever I want here, then redirect
    window.location.href = "detail.aspx?CID=67525";
});
$('#link2').click(function(){
    // do whatever I want here, then redirect
    window.location.href = "detail.aspx?CID=17522";
});

$("table tr").click(function(e) {
    e.stopImmediatePropagation();
    $(this).find("a").trigger('click');
});

Answer 2

Мой вариант использования состоял в том, чтобы вызывать щелчок при нажатии на -элемент.Проверка типа целевого элемента решает проблему рекурсивного вызова.

$('#table tbody td').click(function(e){
    if ($(e.target).is('td')) {
        $(this).find('input').trigger('click');
    }
});

Answer 3

Я думаю, у меня есть то, что вы ищете. Вам нужно вызвать click() для тега привязки в обработчике и убедиться, что вы игнорируете события от самой привязки. Кроме того, WebKit не поддерживает click(), поэтому вы должны реализовать его самостоятельно.

Обратите внимание на указанную ниже скрипку, что она правильно следует цели ссылки, то есть открывает новое окно или загружается в то же окно. http://jsfiddle.net/mendesjuan/5pv5A/3/

// Some browsers (WebKit) don't support the click method on links
if (!HTMLAnchorElement.prototype.click) {
    HTMLAnchorElement.prototype.click = function() {
      var target = this.getAttribute('target');
      var href = this.getAttribute('href');
      if (!target) {
          window.location = href;
      } else {
          window.open(href, target);
      }          
    }
}

$("table tr").bind('click',function(e) {
    // This prevents the stack overflow
    if (e.target.tagName == 'A') {
        return;
    }
    // This triggers the default behavior of the anchor
    // unlike calling jQuery trigger('click')
    $(this).find("a").get(0).click();
});

Answer 4

$('a.fancybox').click(function(evt){evt.stopPropagation())});

$('table tr:has[.fancybox]').click(function(evt){
$(this).find('.fancybox').trigger('click')
})