title: Preventing "too much recursion" error in jQuery
body: <p><strong>EDIT**</strong></p>
  
  <p>I have this click event</p>
  
  <pre><code>$('.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();
  
      }
  
  });
  </code></pre>
  
  <p>When debug in the console it says <code>too much recursion</code> meaning it is in some sort of endless loop at this point. I think it is because of the <code>trigger("click")</code> event in the <code>if</code> statement, because I seen something similar online.</p>
  
  <p>Basically, I want to say, if given word has the class <code>right-word</code> then move on (hence the trigger), else ...</p>
  
  <p>Is there another way to write it that will not crash?</p>
  
  <p>Here is a fiddle: <a href="http://jsfiddle.net/Dxxmh/112/" rel="nofollow">http://jsfiddle.net/Dxxmh/112/</a></p>
  
  <p>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)</p>