Adding click event for a button created dynamically using jQuery

Question

How to add a button click event on a button that was added dynamically using jQuery   The jQuery code that adds the dynamic buttons inside a div container       pg menu content   empty     div       lt div data-role  fieldcontain   gt         lt input type  button  value  Dynamic Button  id  btn a    gt    appendTo  div clone    appendTo   pg menu content      Question 1  How can I add a click event for the above button   I tried the below and it has not triggered      btn a   click function      alert   button clicked          Question 2  How can I get the value of the button inside the click event   For example I want to get the value  Dynamic Button  inside the click event function   Can you guys please help me on this

User · Answer

Question 1  Use  delegate on the div to bind a click handler to the button   Question 2  Use   this  val   or this value  the latter would be faster  inside of the click handler   this will refer to the button       pg menu content   on  click     btn a   function        alert   this  val           div       lt div data-role  fieldcontain   gt         lt input type  button  value  Dynamic Button  id  btn a    gt    appendTo  div clone    appendTo   pg menu content

User · Answer

Use    document  on  click     btn a   function      alert   button clicked          to add the listener for the dynamically created button   alert     btn a   val       will give you the value of the button

User · Answer

Just create a button element with jQuery  and add the event handler when you create it    var div       lt div   gt      data-role     fieldcontain         btn       lt input   gt                    type     button                 value    Dynamic Button                 id       btn a                 on                         click  function                          alert   this value                                                      div append btn  appendTo      pg menu content   empty        FIDDLE

User · Answer

Use a delegated event handler bound to the container       pg menu content   on  click     btn a   function        console log this value         That is  bind to an element that exists at the moment that the JS runs  I m assuming  pg menu content exists when the page loads   and supply a selector in the second parameter to  on    When a click occurs on  pg menu content element jQuery checks whether it applied to a child of that element which matches the  btn a selector   Either that or bind a standard  non-delegated  click handler after creating the button   Either way  within the click handler this will refer to the button in question  so this value will give you its value

[javascript] Adding click event for a button created dynamically using jQuery

Examples related to javascript

Examples related to jquery

Examples related to html