title: JQuery detecting click interactions on nested elements causing huge loop
body: <p>Attempting to add a click event to a button that is nested between multiple elements (ul, div.col, li, div.panel, div.panel-body). I am able to access it with the below code, however as if I click on the page more than a few times the console.logs begin to loop and <strong>execute thousands of times</strong>.   </p>
  
  <p>I am nearly positive it is the nesting of the functions causing this. But I do not have a thorough enough background in JQuery to be able to tell exactly what the browser is doing.</p>
  
  <p>Here is my JQuery code:</p>
  
  <pre><code>        $('#displayList #col1').click(function(){
          console.log('clicked col');
          $('li').click(function(){
              var id = $(this).attr('id');
              console.log(id);
              $('div.panel').click(function(){
                  console.log('clicked panel');
                  $('div.panel-body').click(function(){
                      console.log('clicked panel body');
                      $('button').click(function(){
                          console.log('clicked button');
                          return;
                      });
                      return;
                  });
                  return;
              });
              return;
          });
          return;
      });   
  </code></pre>
  
  <p>Could one of you wonderful JQuery gurus explain what is causing this bug and point me in a better path for checking if the button has been clicked or if it hasnt(just the panel was clicked).</p>
  
  <p>Also, does anyone know a good and preferably free debugging program that I can use to step through JQuery code execution by execution?</p>
  
  <p>Thank you so much for your knowledge</p>