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

Question

This question already has answers here:

Event binding on dynamically created elements? (23 answers)

Closed 11 years ago.

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.

• PSL: Either bind the event after the element is appended or delegate it to its parent that exists in DOM always.
• Prem: This video helped me - youtube.com/watch?v=unk-U_LQWuA

Answer 1

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.

• Jiho Kang: It looks like this will cause the handler to fire twice if the element already exists.
• nnnnnn: @JihoKang - No it doesn't. Why would it? There's only one handler.
• Chris: this is a raw DOM element so needs re-wrapping for jquery functionality, ie, $(this)

Answer 2

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

Answer 3

Just create a button element with jQuery, and add the event handler when you create it :

var div = $('<div />', {'data-role' : 'fieldcontain'}),
 btn = $('<input />', {
 type : 'button',
 value : 'Dynamic Button',
 id : 'btn_a',
 on : {
 click: function() {
 alert ( this.value );
 }
 }
 });
div.append(btn).appendTo( $('#pg_menu_content').empty() );

FIDDLE

Answer 4

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 = $('<div data-role="fieldcontain"/>');
$("<input type='button' value='Dynamic Button' id='btn_a' />").appendTo($div.clone()).appendTo('#pg_menu_content');