Preventing "too much recursion" error in jQuery

Question

EDIT**

I have this click event

$('.next-question').click(function () {

    $('td').removeClass('highlight-problem');
    var r = rndWord;
    while (r == rndWord) {
        rndWord = Math.floor(Math.random() * (listOfWords.length));
    }
    $('td[data-word="' + listOfWords[rndWord].name + '"]').addClass('highlight-problem');
    $('td[data-word=' + word + ']').removeClass('wrong-letter').removeClass('wrong-word').removeClass('right-letter');
    var spellSpace = $('td[data-word=' + listOfWords[rndWord].name + ']').hasClass('right-word');
    if (spellSpace) {

        $('.next-question').trigger('click');

   } else {

        $("#hintSound").attr('src', listOfWords[rndWord].audio);
        hintSound.play();
        $("#hintPic").attr('src', listOfWords[rndWord].pic);
        $('#hintPic').show();
        $('#hintPicTitle').attr('title', listOfWords[rndWord].hint);
        $('#hintPicTitle').show();

    }

});

When debug in the console it says too much recursion meaning it is in some sort of endless loop at this point. I think it is because of the trigger("click") event in the if statement, because I seen something similar online.

Basically, I want to say, if given word has the class right-word then move on (hence the trigger), else ...

Is there another way to write it that will not crash?

Here is a fiddle: http://jsfiddle.net/Dxxmh/112/

INSTRUCTION: Click the letters on the right to spell the highlighted area in the grid (The images to help you spell the words are not available in a fiddle so you have to spell them using the console, by looking up the td's)

Answer 1

I would do something like this:

if (spellSpace) {
            if(score.right != 4)
                $('.next-question').trigger('click');

I see like if(score.right == 4) means the end of game. After it is ended - you have no words (or just have no "right" words, not sure) at all and that is why it never stops. It just triggers click forever instead of stop doing anything and wait for user to click Restart button.

I guess that condition is not enough. Not sure how number of wrong words is counted and handled. But it should be enough to move forward and build correct condition based on your programm logic. Any recursion you start (and you start it with trigger("click")) must have a stop condition.

Answer 2

.trigger('click') will just invoke the listener once more. Did you intend to follow the link only in that circumstance? In that case you could return false in your else scenario.

Answer 3

This isn't a jQuery issue: you're manually triggering the same event from within the handler:

 $('.next-question').trigger('click');

Now, this will cause an infinite loop if you're not careful. Best way to fix this is not to invoke the handler by triggering the event a second time, but by calling it using a function name:

 $('.next-question').click(function callMe(event)
 {
      //replace: $('.next-question').trigger('click');
      //with this:
      if (spellSpace && event)
      {//also check if the event has been passed
          callMe.apply(this,[]);//don't pass event for recursive call
      }
 });