on click function to dynamically created button

Question

I created a script where an input field and button will be created based on selection of options. Now I want to execute a function upon clicking the button. Below is my code:

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

Function

$(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);
 }

Here upon clicking on button function should get executed. But actually it's getting executed while changing option. Here is my fiddle:

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

`ad.onclick = fu_a(this.id);` should be `ad.onclick = fu_a.bind(this.id);` — Rajesh, Mar 01 '17 at 06:00
Another one: http://stackoverflow.com/questions/29526556/javascript-onclick-function-is-called-immediately-not-when-clicked — Rajesh, Mar 01 '17 at 06:03
@Satpal Thanks. People usually wont delete an answer with upvotes. Thanks for leading by example. — Rajesh, Mar 01 '17 at 06:07
few pointers for you: 1. Look into `.addEventListener`, `.bind`, `.apply` and `.call`. 2. variables declared without `var` are global. 3. Use better naming convention(`id="sd"` does not shows purpose of element). 4. `document.ready` is an init function. It should call functions and not declare them. 5. Try to use smaller function and export common logic out to another function. That will make your code more readable and maintainable. :-) — Rajesh, Mar 01 '17 at 06:13

score 0 · Accepted Answer · answered Mar 01 '17 at 06:01

0

just use this

ad is your dynamically created button

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

answered Mar 01 '17 at 06:01

Sujal Mandal

975
1
14
29

Though I would have advised the same, this does not explains why was it calling immediately. Also when you find an obvious question, there is a high possibility that it has been answer already. Best way is to find such posts and share their links for now. Later when you have enough rep, you can mark them as duplicate – Rajesh Mar 01 '17 at 06:05
yup but can't really do that with this kind of rep, i'm also new to SO – Sujal Mandal Mar 01 '17 at 06:06
Yes I know. Thats why I said *find such posts and **share their links** for now*. – Rajesh Mar 01 '17 at 06:08

on click function to dynamically created button

1 Answers1