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.
This question is related to
javascript
jquery
html
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');
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() );
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
Source: Stackoverflow.com