jQuery Click Table Row Toggle Section

Question

I have the following markup (which I have no control and must remain as is, however the JavaScript can be manipulated.)

http://jsbin.com/uyifu3/edit

What I'm trying to accomplish is that when the table row is clicked the the "Toggle Me Here" link is automatically clicked.

I keep finding my self getting into a recursive loop with the current setup.

So clicking anywhere in the table row (minus actually clicking on the link itself) should click the link which there for will toggle the red box. click on the link independent of the table row should toggle the red box as normal without calling the 'selectedRow' click event being fired.

Answer 1

What is happening (I think) is that when you click on the anchor, the event bubbles up and triggers the one bound to the row. I would suggest binding to the anchor as follows:

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

Also, remove the inline function call from the anchor, and give it the class .toggleMe or such (used in the above click handler):

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

Try it here: http://jsbin.com/uyifu3/7/edit (clicking on the anchor will not trigger the .selectedRow click event, to which I added an alert).

Answer 2

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

and just remove any functionality for toggleMe() so that essentially clicking the link is no different than clicking the row. it's just there for show :)

Answer 3

Try backing out to a common parent (the row/tr in this example) and then drill back down to the target (a with an onclick handler).

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

Answer 4

I assume that there's more than one row (since you're using a class for the TR). This code would work for you:

$(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();
  });
});

Essentially it removes the toggleMe() anchors and makes the entire row clickable.

Here's the code in action.

Answer 5

Disclaimer, the below answer isn't an optimal solution. Go with @karim's solution using unobtrusive handlers if at all possible.

If his solution is not an option, e.g. this link is auto-generated by something, then you can do this:

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

You can test it here, it just checks that the click didn't originate from the anchor in the first place. If that's the case, it's done what it need to do, the click event bubbling up to the row should take no action.