Question

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.

The overview code:

<tbody>
    <tr>
       <td>
          <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;">details screen for 1</a>
       </td>
    </tr>
    <tr>
       <td>
          <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;">details screen for 2</a>
       </td>
    </tr>
</tbody>

The javascriptthat makes the rows clickable:

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();
                });
    });
}

SOLUTION

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.

<td>
    <a href="/pop-up/details/2/"element_id="2" pop_w="800" pop_h="600">details screen for 2</a>
</td>

Js:

$(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);
});

Answer 1

So there must be multiple td’s in each table rows. Therefore when you run

$(this).find('a').click();

It finds every a tag in the row (equal to the number of td’s) in the row and executes their click functions. Due to this it opens multiple popups

Replace the code with:

$(this).find('a:first').click();

Or use:

$(table).find('tbody tr').click(function() {
   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;
})