Question

我搜索过高低，并且无法找到我想要做的解决方案。

我正在使用以下代码添加动态行，并按元素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>

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

提前感谢您的帮助。

Answer 1

实现所需目标的正确方法是event delegation。也就是说，您将事件处理程序分配给父元素（如<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 and addEventListener Problem in Javascript?）。或者，您可以将jQuery用于相同的目的。

UPD：为IE添加了默认操作防护功能。

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

使用Javascript动态创建触发弹出窗口的链接

1 个答案: