クリック機能で動的に作成ボタン

Question

オプションの選択に基づいて入力フィールドとボタンが作成されるスクリプトを作成しました。ボタンをクリックすると関数が実行されます。以下は私のコードです：

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

Answer 1

はちょうどこの

広告が動的に作成したボタン

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