title: Infinite new window loop when triggering click event
body: <p>I have a overview page that shows the data in a table. A pop-up opens when the user clicks on the row. But the pop-up get's reloaded over and over again until it hangs.</p>
  
  <p>The overview code: </p>
  
  <pre><code>&lt;tbody&gt;
      &lt;tr&gt;
         &lt;td&gt;
            &lt;a href="/pop-up/details/1/" onClick="MyWindow=window.open('/details_screen/1/','window1','toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=yes,resizable=yes,width=800,height=600'); return false;"&gt;details screen for 1&lt;/a&gt;
         &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
         &lt;td&gt;
            &lt;a href="/pop-up/details/2/" onClick="MyWindow=window.open('/details_screen/2/','window2','toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=yes,resizable=yes,width=800,height=600'); return false;"&gt;details screen for 2&lt;/a&gt;
         &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>The javascriptthat makes the rows clickable:</p>
  
  <pre><code>function make_rows_clickable(table){
      $(table).find('tbody tr').each(function() {
                  $(this).hover(function(){
                      //rollover
                      $(this).addClass('hover');
                  },
                  function() {
                      //rolloff
                      $(this).removeClass('hover');
                  }).click(function() {
                      $(this).find('a').click();
                  });
      });
  }
  </code></pre>
  
  <p><strong>SOLUTION</strong></p>
  
  <p>As the answer comment states, the anchor click triggers the tr click event and creates the infinte loop. I solved it by removing the onClick event and adding attributes. The tr click event opens then the pop-up.</p>
  
  <pre><code>&lt;td&gt;
      &lt;a href="/pop-up/details/2/"element_id="2" pop_w="800" pop_h="600"&gt;details screen for 2&lt;/a&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>Js:</p>
  
  <pre><code>$(table).find('tbody tr').hover(function(){
                      //rollover
                      $(this).addClass('hover');
                  },
                  function() {
                      //rolloff
                      $(this).removeClass('hover');
                  }).click(function(e) {
                      e.stopPropagation();
                      var anchor = $(this).find('a');
  
                      var el_id = $(anchor).attr('element_id');
                      var pop_w = $(anchor).attr('pop_w');
                      var pop_h = $(anchor).attr('pop_h');
  
                      MyWindow=window.open('/details/screen/' + el_id + '/', el_id, 'toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=yes,resizable=yes,width=' + pop_w + ',height=' + pop_h);
  });
  </code></pre>