How to disable nested onClick event temporarily with jQuery

Question

I've the following table with a link in the last cell. The table is populated with data via ajax, depending on the users input.

<table class="table-list">
<tbody>
<tr>
 <td>...</td>
 <td><a href="/link">Link</a></td>
</tr>
</tbody>
</table>

Because I like to have the whole row clickable, I use the following script to catch the onClick event. But the link is also in the table row and the onClick-Event gets fired infinity times until the script aborts with an "stackoverflow" error.

<script>
$(function() {
 $('.table-list tr').live('click', function() {
  $('a:last', this).click();
 });
});
</script>

I tried to disable the event temporarily like below but it's not working.

<script>
$(function() {
 $('.table-list tr').live('click', function() {
  $(this).off('click');
  $('a:last', this).click();
  $(this).on('click');
 });
});
</script>

I also tried some variations like addind and removing a class isClicked to the row etc. but nothing worked.

Any suggestions on this?

flo · Accepted Answer · 2012-11-27 17:00:43Z

It is important to prevent event propagation, e.g. bubbling.

I posted some example code here: http://pastebin.com/d25QeVkK

This is the JS/jQuery part:

(function($){
    $(document).delegate('table tr', 'click', function(e){
        $('a', this).trigger('click');
    });
    $(document).delegate('tr a', 'click', function(e){
        console.log("it works!");
        // use either of these to prevent stackoverflow
        //e.stopPropagation(); // use this if you want normal click behaviour without bubbling
        return false; // use this if you don't want normal click behaviour and no propagation
    });                            
})(jQuery);

So this wasn't the smartest solution, because it actually won't work because of the way delegate works. The click has to bubble to the body element for it to work if you use delegate - and stopPropagate prevents that. This should do the trick:

$('body').delegate('.table-list tr', 'click', function(e){
        $('a', this).trigger('click');
});
$('body').delegate('.table-list tr a', 'click', function(e){
        e.stopPropagation();
        window.location.href = $(this).attr('href');   
});

e.stopPropagation(); has to stay in the click handler, because else you would still get a frozen UI and recursion warning after a while, before getting redirected to the target url.

http://pastebin.com/PrH96GX8

So this is even shorter and should work too:

$('body').delegate('.table-list tr', 'click', function(e){
    window.location.href = $(this).find('a').attr('href');  
});

Use this to open in new tab:

$('body').delegate('.table-list tr', 'click', function(e){
    window.open($(this).find('a').attr('href'),'_newtab');
    return false;
});

Please keep in mind to use the right selectors, this is really generic code.

Mihai Matei · Accepted Answer · 2012-09-27 11:06:39Z

0

Try this one:

$(function() {  
  $('.table-list').on('click', 'tr', function(){
    $(this).find('a:last').trigger('click'); 
  });

  $('.table-list').on('click','a',function(e){ 
   e.stopImmediatePropagation(); 
  }); 
});

edited Sep 27, 2012 at 11:06

answered Sep 27, 2012 at 10:44

Mihai Matei

24.3k5 gold badges34 silver badges50 bronze badges

3 Comments

naden Over a year ago

That triggers just the same error Uncaught RangeError: Maximum call stack size exceeded.

Mihai Matei Over a year ago

I've just edited my answer.. you can try this one.. let me know if this is ok now

naden Over a year ago

That just fires nothing. I came up with a hidden form as solution. Working but not very elegant. $('.table-list tr').live('click', function() { $('#go').attr('action', $('a:last', this).attr('href')).submit(); });

bldoron · Accepted Answer · 2012-09-27 15:16:36Z

0

Instead of trying to click the link, try this:

<table class="table-list">
<tbody>
<tr style='border: 1px solid black;'>
 <td>.1.</td><td>.2.</td><td>.3.</td><td>.4.</td><td>.5.</td>
 <td class='link'><a href="/link" target="_blank">Link</a></td>
</tr>
<tr style='border: 1px solid black;'>
 <td>.1.</td><td>.2.</td><td>.3.</td><td>.4.</td><td>.5.</td>
 <td class='link'><a href="/link">Link2</a></td>
</tr>
</tbody>
</table>

Script:

  $('.table-list td').each(function(){
        if ($(this).find('a').length === 0){
            $(this).on('click', function(){
                var link = $(this).siblings('.link').find('a');
                if (link.attr('target') === '_blank'){
                    window.open(link.attr('href'));
                }
                else {
                    window.location = link.attr('href')            
                }
            });
        }
    });

It's ugly, and could be shortened, but it's better than the form submit IMHO.
If you want to make the other tds clickable consider just wrapping the entire row with the link.

answered Sep 27, 2012 at 15:16

bldoron

1,0804 gold badges20 silver badges37 bronze badges

1 Comment

naden Over a year ago

Thank you for your suggestion - but I'll stay with the form. Wrapping a row or a table into a link can lead to serious problems with Internet Explorer.

Collectives™ on Stack Overflow

How to disable nested onClick event temporarily with jQuery

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related