触发点击事件时无限新窗口循环
我有一个概述页面,显示表格中的数据。当用户单击该行时,将打开一个弹出窗口。但弹出窗口会一遍又一遍地重新加载,直到挂起。
概述代码:
<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>
杰斯:
$(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);
});
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);
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
所以每个表行中必须有多个 td。因此,当您运行时,
它会找到该行中的每个
a
标记(等于 td 的数量)并执行它们的点击函数。因此,它会打开多个弹出窗口将代码替换为:
或使用:
So there must be multiple td's in each table rows. Therefore when you run
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 popupsReplace the code with:
Or use: