2

I'm trying to trigger a button (inside one of my table) when the user clicks on a <tr> tag object, as below:

    $(document).ready(function(){
      $('body').on('click', 'tr', function(){
        var tridx = $(this).data('track-id');
        $('td div#play'+tridx).click();
      });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="sortable">
      <thead>
        <tr>
          <th data-sort="nope">id</th>
          <th data-sort="name">Artist</th>
          <th data-sort="name">Title</th>
          <th data-sort="name">Genre</th>
          <th data-sort="duration">Duration</th>
          <th data-sort="date">Release</th>
        </tr>
      </thead>
      <tbody>						
    	<tr data-track-id="252">			
    		<td>
    			<div data-track-name="1" data-track-id="252" id="play252" class="playbtn252" style="display: none;"></div>
    			<div id="countlist252" data-count-list="1" style="display: block;">1</div>
    		</td>
            <td>Simon Deoro</td>
            <td>1</td>
            <td>1</td>
            <td>3:47</td>
            <td>2016-12-06</td>
        </tr>
        <!-- more tr -->
      </tbody>
    </table>

The tridx is correct, however I get this error from console:

Uncaught RangeError: Maximum call stack size exceeded

What's wrong in my code, I cannot understand it seems everything correct to me?

Improve this question
13
  • $('td div#play'+tridx).click();??? Commented Dec 7, 2016 at 10:48
  • @PraveenKumar I tried also a simple $('#play'+tridx).click(); but it's not working Commented Dec 7, 2016 at 10:49
  • 2
    When you are using $('td div#play'+tridx).click(); event is propagating to tr, seems you are stuck in continuous loop Commented Dec 7, 2016 at 10:51
  • 1
    @nashcheez: That is so wrong, it is not right :) The number of TRs does not cause this problem. A recursively generated event does. Commented Dec 7, 2016 at 10:55
  • 1
    @philantrovert: That is the same as $(this).data('track-id') Commented Dec 7, 2016 at 10:58

2 Answers 2

Reset to default
3

The problem is your function call (handling the click event) going recursive.

jQuery's .on(...) is capturing the click event for the specified selector (tr in your case) and everything beneath it. So the click event of the button inside the tr also fires the anonymous function you've defined.

In your scenario this is not desirable because the user's click triggers another click event, triggering another click event, and so on.

Every call to a function from inside a function generates a new entry on the call stack, which eventually grows too big and falls over. (That's the symptom you're seeing.) The stack shrinks back down only when a function actually returns... (which is never happening for you).

There are various ways you could avoid this problem. Possibly simplest: just forget having a click handler on the button itself (as the button's click triggers the containing tr click event anyway).

Alternatively you could tell jQuery to stop applying the click event up the DOM tree...

Quoting the jQuery documentation on this subject:

By default, most events bubble up from the original event target to the document element.

At each element along the way, jQuery calls any matching event handlers that have been attached. A handler can prevent the event from bubbling further up the document tree (and thus prevent handlers on those elements from running) by calling event.stopPropagation().

Any other handlers attached on the current element will run however.

To prevent that, call event.stopImmediatePropagation(). (Event handlers bound to an element are called in the same order that they were bound.)

Cite: http://api.jquery.com/on/

On a semi-related note, I'd strongly recommend structuring your jQuery code in a way which makes separation of event handlers vs private methods vs public methods as clear as possible. There's a variety of "recommendations" (I certainly can't say standards!) on how to do it - my personal favourite is here: https://stackoverflow.com/a/5947280/817132

Using this method, I create a "namespace" for all the UI code (assuming it's only a small codebase) and have one "setup" function (invoked by onReady) which connects all the event handlers to their relevant selectors. Those event handlers are as minimal as possible, mostly invoking private functions containing the real logic.

As a matter of personal preference, I avoid anonymous functions as much as possible. I attach references to functions instead.

On a semi-semi related note ... if you've not already, I would strongly recommend getting to grips with your browser's developer tools. (My personal favourite is that which ships with Chrome.)

Specifically look into breakpoints and learn how to step line by line (and in and out of functions) while using watches.

For example: https://developers.google.com/web/tools/chrome-devtools/javascript/add-breakpoints

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

You're welcome. I've added a note about structuring code ... it's not really relevant as an answer to your question - but I guarantee you a better experience in the medium/long-term if you start now. Anonymous functions can become a bit of a mare for debugging, especially in situations like this. If you're not already familiar with it - I'd also get a grasp on using your browser's developer tools for setting debug breakpoints to step through execution line by line.
2

As I mentioned in comment, the cause is recursively generating a click event on an element inside the same TR.

Just check that the click event is not from the play button before clicking the play button:

$(document).ready(function(){
  $('body').on('click', 'tr', function(e){
    var tridx = $(this).data('track-id');
    var $button = $('td div#play'+tridx);
    if (!$button.is(e.target))
    {
        $button.click();
    }
  });
});
Improve this answer

1 Comment

@SimonLeCat: Other options include using sentinel flags, but this is simplest.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.