0

我搜索了高低，但无法找到我想要做的事情的解决方案。

我正在添加动态行，并通过元素 id 执行此操作，使用如下代码：

  var cellRight = row.insertCell(1);
  var el = document.createElement('input');
  el.type = '';
  el.name = 'description' + iteration;
  el.id = 'description' + iteration;
  el.size = 55;
  cellRight.appendChild(el);

我有一个字段，我想在其中添加一个文本链接，并让它打开一个新大小的窗口。一个弹出窗口，基本上。我已经尝试了许多不同的代码片段，但没有一个能做到这一点。我最接近的是整页中的新标签。

  var cellRight = row.insertCell(3);
  var el = document.createElement("td"); 
  var cell=document.createElement('td');
  var link=document.createElement('a');
  link.setAttribute('href','http://www.domain.com/page.php');
  link.setAttribute('target','_blank');
  link.setAttribute('height','400');
  link.setAttribute('width','500');
  link.appendChild(document.createTextNode('Page'));
  cell.appendChild(link);
  el.appendChild(cell);
  cellRight.appendChild(el);

我也尝试过类似的东西：

link.onclick(window.open('http://www.domain.com/page.php','popUpWindow','height=400,width=500,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')

和

el.html('<a href="JavaScript:newPopup(\'http://www.domain.com/page.php\');">Page</a>');

我可以使用此代码使其在常规 javascript 中工作，但我在输入的第一“行”中使用它，并且元素 ID 用于创建后续动态行。

<script type="text/javascript">
    function newPopup(url) {
    popupWindow = window.open(
url,'popUpWindow','height=400,width=500,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
</script>
<a href="JavaScript:newPopup('http://www.domain.com/page.php');">Page</a></td>

我希望有人可以提供链接或示例来帮助我完成这项工作。

在此先感谢您的帮助。

4

1 回答 1

3

实现您需要的正确方法是事件委托。也就是说，您将事件处理程序分配给父元素（如<body>），并检查其中的事件目标。

例如，您可能有以下 HTML：

<div id="container">
  <a href="http://www.domain.com/page.php">Page 1</a>
  <a href="http://www.domain.com/page2.php">Page 2</a>
</div>

<button id="addBtn">Add a new link</button>

请注意，每个链接都有一个适当的href属性，将用于弹出窗口。它也将作为禁用 Javascript 的情况下的后备。

并且（简化的 - 我不检查元素类型，也不检查 href 属性的存在）脚本将是：

var container = document.getElementById('container');

container.addEventListener('click', function (e) {
   if (e.preventDefault) {
     e.preventDefault();
   } else {
     e.returnValue = false; // For IE
   }

   var target = e.target;
   var popupWindow = window.open(target.href,'popUpWindow',
       'height=400,
       width=500,
       left=10,
       top=10,
       resizable=yes,
       scrollbars=yes,
       toolbar=yes,
       menubar=no,
       location=no,
       directories=no,
       status=yes'
   );  
});

// The following code creates links dynamically upon clicking the button
document.getElementById('addBtn').addEventListener('click', function (e) {
    var index = container.getElementsByTagName('a').length + 1;
    var newLink = '<a href="http://www.domain.com/page' + index +'.php">Page ' + index +'</a>';

    container.innerHTML += newLink;
});

请参阅此处的示例：http: //jsfiddle.net/C53cd/3/。在 FF16 和 Chrome 中为我工作。请注意，您可能需要为事件绑定实现一个简单的 polyfill 才能在 IE 中工作（MSIE 和 Javascript 中的 addEventListener 问题？）。或者，您可以将 jQuery 用于相同目的。

UPD：为 IE 添加了默认操作预防。

UPD 2：添加了动态创建新链接的代码。

于 2012-11-20T05:08:46.057 回答