触发点击事件时无限新窗口循环

Question

我有一个在表格中显示数据的概览页面。当用户单击该行时会打开一个弹出窗口。但是弹出窗口会一遍又一遍地重新加载，直到它挂起。

概览代码：

<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>

使行可点击的javascript：

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

解决方案

正如答案评论所述，锚点点击会触发 tr 点击事件并创建无限循环。我通过删除 onClick 事件并添加属性来解决它。 tr 点击事件打开，然后弹出。

<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

所以每个表行中必须有多个 td。因此，当您运行时

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

它找到行中的每个a标签（等于td的数量）并执行它们的点击功能。因此，它会打开多个弹出窗口

将代码替换为：

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

或使用：

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