单击功能以动态创建按钮[重复]答案

【问题标题】：on click function to dynamically created button [duplicate]单击功能以动态创建按钮[重复]
【发布时间】：2017-03-01 14:16:26
【问题描述】：

我创建了一个脚本，其中将根据选项的选择创建输入字段和按钮。现在我想在单击按钮时执行一个功能。以下是我的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="abc">
    <option value="1">a</option>
    <option value="2">b</option>
    <option value="3">c</option>
</select>
<div id="sd"> </div>

功能

$(document).ready(function () {
   i=0;
   $("#abc").on('change',function() {
   var maindiv= document.createElement('div');
       maindiv.setAttribute("id","TextBoxesGroup");
       var secdiv=document.createElement('div');
       secdiv.setAttribute("id","TextBoxDiv1")
       maindiv.appendChild(secdiv);
       var ipt=document.createElement("input");
       ipt.setAttribute("type","text");
       ipt.setAttribute("id","textbox1");
       secdiv.appendChild(ipt);
       var ad=document.createElement("input");
       ad.value= "+";
       ad.type="button";
       ad.style.width="30px";
       ad.setAttribute("id","addButton"+i);
       ad.onclick=fu_a(this.id);
       secdiv.appendChild(ad);    
       var division= document.getElementById("sd");
       division.appendChild(maindiv);
       i++;
    });
 });      

 function fu_a(id){
     alert(id);
 }

点击按钮功能应在此处执行。但实际上它是在更改选项时执行的。这是我的小提琴：

https://jsfiddle.net/Safoora/ssvjjg6e/16/

【问题讨论】：

ad.onclick = fu_a(this.id); 应该是ad.onclick = fu_a.bind(this.id);
另一个：stackoverflow.com/questions/29526556/…
@Satpal 谢谢。人们通常不会删除带有赞成票的答案。感谢您以身作则。
感谢大家的回复。
给你一些建议： 1. 查看.addEventListener、.bind、.apply 和.call。 2. 没有var 声明的变量是全局变量。 3. 使用更好的命名约定（id="sd" 不显示元素的用途）。 4.document.ready是一个初始化函数。它应该调用函数而不是声明它们。 5. 尽量使用更小的函数，将通用逻辑导出到另一个函数。这将使您的代码更具可读性和可维护性。 :-)

标签： javascript jquery html

【解决方案1】：

就用这个

ad 是您动态创建的按钮

ad.addEventListener("click", function(){
   alert("button clicked");
});

【讨论】：

虽然我会提出同样的建议，但这并不能解释为什么它会立即调用。此外，当您发现一个明显的问题时，很有可能已经回答了。最好的方法是找到这些帖子并暂时分享他们的链接。稍后当您有足够的代表时，您可以将它们标记为重复
是的，但不能用这种代表真正做到这一点，我也是 SO 新手
是的，我知道。这就是为什么我说找到这样的帖子并分享他们的链接现在。