如何从每个动态生成 tr 打开弹出窗口答案

【问题标题】：How to open popup window from each of dynamically generate tr如何从每个动态生成 tr 打开弹出窗口
【发布时间】：2013-07-28 09:41:15
【问题描述】：

我正在尝试从父窗口打开一个弹出窗口。我有两个tr，每个tr 都有一个应用按钮，只要我点击应用按钮，它就会打开一个弹出窗口。

但不知何故，第一个 tr 的弹出窗口仅打开应用按钮，这意味着只要我单击第一个 tr 的应用按钮，弹出窗口就会打开。

但是对于第二个 tr 应用按钮，弹出窗口不会打开。

我不确定为什么它不起作用。

以下是我的完整代码。

<html>
<head>
<style>

* { font-family: Trebuchet MS; }
#containerdiv {width:90%; height: 90%; display: none; position: fixed;margin-top: 5%; margin-left: 5%; background:#FFF; border: 1px solid #666;border: 1px solid #555;box-shadow: 2px 2px 40px #222; z-index: 999999;}
/*#containerdiv iframe {display:none; width: 100%; height: 100%; position: absolute; border: none; }*/
#blockdiv {background: #000; opacity:0.6;  position: fixed; width: 100%; height: 100%; top:0; left:0; display:none;}
ul { padding:10px; background: #EEE; position: absolute; height: 200px; overflow: scroll;}
ul li {color: #222; padding: 10px; font-size: 22px; border-bottom: 1px solid #CCC;  }
h3 { font-size: 26px; padding:18px; border-bottom: 1px solid #CCC; }
#close { top: 13px;position: absolute;right: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
#close:hover {  cursor: pointer; background: #E5E5E5 }

#apply { top: 13px;position: absolute;left: 13px; padding: 10px; background: #EEE; border: 1px solid #CCC;}
#apply:hover {  cursor: pointer; background: #E5E5E5 }

</style>

<script type="text/javascript"  src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>

function open(url) {
    $('#blockdiv').fadeIn();
    $('#iframe').attr('src', url);
    $('#containerdiv').fadeIn();   
}

function close() {  
    $('#blockdiv').fadeOut();
    $('#containerdiv').fadeOut();  
}

$(document).ready(function() {
  $('ul').css({width: $('#containerdiv').width(),height:    $('#containerdiv').height()})
     $('#close').click( function() { close() })
     $('#JN_apply').click( function() { open($(this).data('url')); })

});

</script>
</head>


<body bgcolor="#F8F8F8">

<table width="850" border="0" align="left" style="table-layout:fixed; font-family:Arial, Helvetica, sans-serif; font-size:12px;" >
<tr bgcolor = "#C4D3D9" align = "center" height = "10" style="font-size:13px"> 
<th width = "65%">Description</th> 
<th width = "10%">Apply</th>
</tr><tr align="left" style="margin-bottom:10px;">
  <td style="word-wrap: break-word; border-top:none" valign="top">
    <p><span style="font-size:14px; font-weight:bold">
    <a href="some_url"> Field Specialist Program </a>
    </span>
    <br />
  </td>
<td>
<input id= "JN_apply" type=button value="Apply" data-url="http://www.yahoo.com/">
</td>
</tr>
<tr align="left" style="margin-bottom:10px;">
  <td style="word-wrap: break-word; border-top:none" valign="top">
    <p><span style="font-size:14px; font-weight:bold">
    <a href="some_url"> Field Specialist Material </a>
    </span>
    <br />
  </td>
<td>
<input id= "JN_apply" type=button value="Apply" data-url="http://www.google.com/">
</td>
</tr>
</table>

<div id="blockdiv"></div>
<div id="containerdiv">
    <iframe id="iframe" style="width:100%; height: 100%; outline: 1px solid red;"></iframe>
    <span id="close">Close</span>
</div>

</body>
</html>

这是我创建的jsfiddle。在那里你会看到，如果你点击第一个应用按钮，那么弹出窗口就会打开，但是一旦你点击第二个应用按钮，弹出窗口就不会打开。谁能解释我为什么会这样？以及如何解决这个问题？

【问题讨论】：

函数 open() 和 close() 已经存在 - 选择不同的名称
是什么意思？没看懂。。

标签： javascript jquery html

【解决方案1】：

您的 html 无效：id 属性应该是唯一的。当您使用选择器 #JN_apply" 时，它只选择一个按钮（在大多数浏览器中，这将是第一个，正如您所见）。

您应该将每一个更改为使用class 而不是id：

<input class="JN_apply" type=button value="Apply" data-url="http://www.yahoo.com/">

...然后更改 jQuery 选择器以匹配：

$('.JN_apply').click( function() { open($(this).data('url')); })

更新的演示：http://jsfiddle.net/p3wgm/3/

还请注意，创建名为 open() 和 close() 的全局函数并不是一个好主意，因为已经有内置函数 open() 和 close() 并且您的函数将覆盖这些函数。也许openPopup() 和closePopup() 或类似？或者在您的文档就绪处理程序中定义它们，以便它们不是全局的，无论名称如何，这可能会更好。或者，如果它们只从一个地方（如您的示例中）调用，只需将该代码直接放在点击处理程序中。

【讨论】：

谢谢。那行得通。我还有一个疑问。相同的代码在 IE 中不起作用，但在 Chrome 中可以正常工作。你知道可能是什么原因吗？以及如何解决？
在 IE 中会发生什么？控制台中的任何错误？更新后的小提琴似乎在 IE (10) 中与 Chrome 一样工作，但由于跨站点安全设置，两者都不愿意在弹出窗口中实际显示 Yahoo 或 Google。