Adding click event for a button created dynamically using jQuery
html, javascript, jquery
Solution
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.
Problem
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 = $('<div data-role="fieldcontain"/>'); $("<input type='button' value='Dynamic Button' id='btn_a' />").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.