Question

我正在动态创建表格行并添加文本框。我添加了新行并添加了一个事件监听器。我还尝试创建一个单元格并向其添加事件监听器。

我正在使用java脚本函数。但我的功能甚至在之前被调用事件是从新创建的html元素触发的。

在所有情况下，只要创建动态元素，就会调用该函数

感谢任何帮助。

   *Doesnt Works

Try 1* 

function addnewrow()
{
     var row = table.insertRow(x.rowIndex+1);  
     row.addEventListener("click", addme, false); 
}

function addme()
{
     alert("am called "); 
}


*try 2*


var t12=document.createElement("input");
t12.id = index+"q";  
t12.name = index+"q";                    
cellnewrow2.appendChild(t12);                
//cellnewrow2.addEventListener("click",addme(),false);  
cellnewrow2.onclick =addme();

Answer 1

你的第一个例子实际上是正确的。可能还有其他方法可以解决您的问题。但您也可以使用 bind 并在函数内使用 this 关键字引用您的参数或参数。

function addnewrow() {
  var table = document.getElementById('tbl');
  var row = table.insertRow(1);
  row.innerHTML = "CLICK ME";
  let arg = 1;
  row.addEventListener("click", addme.bind(arg));
}

function addme() {
  alert("am called with the argument: " + this);
}

addnewrow();

<table id="tbl">
  <tr>
    <td>Hello</td>
  </tr>
</table>

Answer 2

当您希望它成为回调函数时，您无法实现该功能。
如果不考虑性能优化，它可能是您练习时的基本代码。

<html>
<body>
    <button id='btn'>Click Me</button>
    <div id='div'></div>
</body>
<script>
var count = 0;
var btn   = document.getElementById('btn');

btn.addEventListener('click', function(){
    var div = document.getElementById('div');
    div.innerHTML += '<h2>' + count + '</h2>';
    count++;
});
</script>
</html>

如何将事件绑定到动态添加的文本框？

2 个答案: