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

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

javascript html

Javascript 如何将事件绑定到动态添加的文本框？,javascript,html,dom-events,Javascript,Html,Dom Events,我正在动态创建表行并添加文本框。我添加了新行并向其中添加了一个事件侦听器。我还尝试创建一个单元格并向其中添加事件侦听器我正在为此使用Javascript函数，但我的函数甚至在事件从新创建的html元素触发在所有情况下，动态元素一创建，函数就被调用感谢您的帮助不起作用：试试1 试试2 如果希望函数是回调函数，则无法实现该函数。如果不考虑性能优化，它可能是最基本的代码 <html> <body> <button id='btn'>Click

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

我正在为此使用Javascript函数，但我的函数甚至在事件从新创建的html元素触发

在所有情况下，动态元素一创建，函数就被调用

感谢您的帮助

不起作用：

试试1

试试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>


点击我
var计数=0；
var btn=document.getElementById（'btn'）；
btn.addEventListener（'click'，function（）{
var div=document.getElementById（'div'）；
div.innerHTML+=''+count+''；
计数++；
});

您的第一个示例实际上是正确的。也许你的问题还有其他的解决方法。但是，您也可以使用

bind

并在函数中使用

这个

关键字引用参数

函数addnewrow（）{
var table=document.getElementById（'tbl'）；
var行=table.insertRow（1）；
row.innerHTML=“单击我”；
设arg=1；
row.addEventListener（“单击”，addme.bind（arg））；
}
函数addme（）{
警报（“我被参数调用：+this”）；
}
addnewrow（）

你好
传递函数引用，即行。addEventListener（“单击”，addme，false）
，当您使用（）时，函数被调用。第一个示例实际上是正确的，不会立即调用回调。你能给出一个不符合你期望的最简单完整的例子吗？嗨，satpal，你所说的是正确的。但我想在调用函数时也传递一个参数
var t12=document.createElement("input");
t12.id = index+"q";  
t12.name = index+"q";                    
cellnewrow2.appendChild(t12);                
//cellnewrow2.addEventListener("click",addme(),false);  
cellnewrow2.onclick =addme();     
    

<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>