JQuery Нажмите строку таблицы Переключить раздел

Question

У меня есть следующие разметки (который я не имею никакого контроля и должны оставаться как есть, однако JavaScript можно манипулировать.)

http://jsbin.com/uyifu3/edit

То, что я пытаюсь выполнить заключается в том, что при нажатии на строку таблицы автоматически включается ссылка «Переключить меня здесь».

Я продолжаю находить свое «я» в рекурсивном цикле с текущей настройкой.

Таким образом, щелчок в любом месте строки таблицы (минус фактическое нажатие на ссылку) должен щелкнуть ссылку, которая там будет для переключения красного окна. нажмите ссылку, не зависящую от строки таблицы, должен переключать красный квадрат как обычно, не вызывая событие «selectedRow», которое запускается.

Answer 1

Отказ от ответственности, нижний ответ не является оптимальным решением. Пойдите с решением @karim, используя ненавязчивые обработчики, если это вообще возможно.

Если его решение не вариант, например. эта ссылка автоматически генерируется что-то, то вы можете сделать это:

$(function() { 
    $('.selectedRow').click(function(e) { 
    if(e.target.nodeName != 'A') 
     $(this).find('td:last a').click(); 
    }); 
}); 

You can test it here, он просто проверяет, что щелчок не происходят от якоря в первую очередь. Если это так, то сделано то, что нужно сделать, событие click, пузырящееся до строки, не должно предпринимать никаких действий.

Answer 2

То, что происходит (я думаю), заключается в том, что когда вы нажимаете на якорь, событие пузырится и запускает привязку к строке. Я хотел бы предложить привязку к якорю следующим образом:

$('.toggleMe').click(function(e) { 
     e.stopPropagation(); // prevent event from bubbling up the DOM tree 
     $("#box").toggle();   
    }); 

Кроме того, удалить вызов рядной функции от якоря, и дать ему класс .toggleMe или такие (используемые в вышеуказанном обработчик щелчка):

<a class="toggleMe" href="#">Toggle Me Here</a> 

Попробуйте здесь: http://jsbin.com/uyifu3/7/edit (нажатие на якорь будет не вызывает событие нажатия кнопки «.selectedRow», на которое я добавил предупреждение).

Answer 3

$('tr').click(function(){ 
    $('#box').toggle(); 
}); 

и просто удалить любую функциональность для toggleMe(), так что, по существу, нажав на ссылку ничем не отличается, чем нажав на строку. это просто для шоу :)

Answer 4

Попробуйте вернуться к общему родительскому объекту (строка/tr в этом примере), а затем сверните обратно к цели (a с обработчиком onclick).

$(e.target).parents('tr').first().find('td:last a').click(); 

Answer 5

Я предполагаю, что существует более чем одна строка (так как вы используете класс для TR). Этот код будет работать для вас:

$(document).ready(function(){ 
    // Remove the anchors 
    $(".selectedRow td:last a").each(function(){ 
    $(this).replaceWith($(this).html()); 
    }); 

    // Make entire row clickable 
    $(".selectedRow").click(function(e){ 
    $('#box').toggle(); 
    }); 
}); 

По существу, он удаляет toggleMe() якоря и делает всю строку кликабельным.

Вот code in action.