Add event for dynamically added elements in jQuery

Question

In my HTML page I am dynamically adding some elements on some action. I have assigned certain classes to these elements so that suitable events should get fired whenever these controls are used. I have done it as following:

$(document).ready(function(){      
  $("#btnAddMicroElement").click(function(event,microelement){
        microelement=microelement.replace("'","&#39;");            
        $("#divMicroElements").append("<div class='clsdivmicroelement' style='border-bottom: 2px black solid;'><div><label>Microelement</label><input type='text' class='clstxtmicroelement' value='"+microelement+"'/><input type='button' class='clsbtnmicroelmentadd' value='Add'/></div><div><input type='button' value='Add All' class='clsbtnmicroelementaddall'/></div></div>");
        return false;
  });
  $(".clsbtnmicroelementadd").click(function(){
        alert("its working");
  });
});

In the above given code I am adding some elements to the page on click event of btnAddMicroElement, one of which is an input text with class clsbtnmicroelementadd. I want some action to be performed when this button is clicked. For this I have written click event handler for this class. But it is not getting executed. Is it even allowed to write events for dynamically created elements like this? Please help me to correct my code to get it working.

score 1 · Accepted Answer · answered Sep 21 '14 at 18:25

1

try delegating your event:

$(document).on('click','.clsbtnmicroelementadd',function(){
        alert("its working");
  });

answered Sep 21 '14 at 18:25

Amin Jafari

7,157
2
18
43

I did it, but still not working. – Sep 21 '14 at 18:29
then the problem must be something else! – Amin Jafari Sep 21 '14 at 18:37
I have written this code inside document.ready. Is that the right place to put it in? – Sep 23 '14 at 04:49
yes it is, I made this very simple example for you, see it for yourself => http://jsfiddle.net/m3bvtnnL/ – Amin Jafari Sep 23 '14 at 07:13

score 0 · Answer 2 · answered Sep 21 '14 at 18:28

0

your jquery code should not be in document.ready you should add function for your action and call it by calling this function in event in html code. something like this :

answered Sep 21 '14 at 18:28

a828h

146
9

Add event for dynamically added elements in jQuery

2 Answers2