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

Either bind the event after the element is appended or delegate it to its parent that exists in DOM always. — PSL, Nov 27 '13 at 21:19
This video helped me - https://www.youtube.com/watch?v=unk-U_LQWuA — Prem, Oct 09 '16 at 15:30

score 85 · Accepted Answer · answered Nov 27 '13 at 21:20

85

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.

answered Nov 27 '13 at 21:20

nnnnnn

147,572
30
200
241

It looks like this will cause the handler to fire twice if the element already exists. – Jiho Kang Jul 28 '16 at 12:14
1

@JihoKang - No it doesn't. Why would it? There's only one handler. – nnnnnn Jul 28 '16 at 21:06
`this` is a raw DOM element so needs re-wrapping for jquery functionality, ie, `$(this)` – Chris May 16 '20 at 13:59

score 28 · Answer 2 · answered Nov 27 '13 at 21:20

28

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

answered Nov 27 '13 at 21:20

Lloyd Banks

35,740
58
156
248

adeneo · Answer 3 · 2013-11-27T21:26:34.257

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

score 3 · Answer 4 · answered Nov 27 '13 at 21:25

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');

Adding click event for a button created dynamically using jQuery

4 Answers4

Linked

Related