Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
54
rated 0 times [  55] [ 1]  / answers: 1 / hits: 129578  / 11 Years ago, wed, november 27, 2013, 12:00:00

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.


More From » jquery

 Answers
14

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.


[#74023] Tuesday, November 26, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
parker

Total Points: 259
Total Questions: 109
Total Answers: 97

Location: Zambia
Member since Thu, Jun 25, 2020
4 Years ago
;