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.
See, I have attached .click () inside the .ready () method. However, this method does not work with dynamically created elements. To add an event dynamically to an element, you’ll have to use jQuery .on () method, using a process called Event Delegation.
Binding Click Event to a Dynamically Created Element using jQuery. In jQuery, you can use the .click () method to trigger a click event. This method works with almost every element. The .click () method also work on elements that you will create dynamically using a script.
You create buttons dynamically because of that you need to call them with .live () method if you use jquery 1.7 but this method is deprecated (you can see the list of all deprecated method here) in newer version. if you want to use jquery 1.10 or above you need to call your buttons in this way:
If you try to bind the elements that are dynamically added to the DOM using the click () method of jQuery, this will not work, because it only binds the click event to elements that exist at the time of the “binding”. To bind the click event to all existing and future elements, use jQuery’s on () method. see the following example.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With