javascript - Adding click event for a button created dynamically using jQuery

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 = $('
');
$("").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.

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.