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 click事件并创建infinte循环。我通过删除onClick事件并添加属性来解决它。然后打开tr click事件，弹出窗口。

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

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

1 个答案: