Just think any time you post something on Facebook, Twitter, or LinkedIn you are essential dynamically adding a element to a page. You don't need me to tell you of all the possibility you can use this function with or how commonly this is used. Well since you now know the basics on how to add an event listener to a dynamically added element. The third parameter is a callback value, in which I made a function that will turn the new button background yellow.Īs you can see I was able to add an event listener on my "new button", if when I click on the new button it will change its background to yellow. Then for the on function the first parameter is action value "click", the second parameter will be a child-selector name which in this case the class of the new button added(see line 3). First I create a event listener for the #content which if you remember is the main selector id for the empty div on the html document. How can we add an event listener to that new button ? Line 15 is the event listener that adds a new button every time I click on "click me". Therefore line 1-5 it's just me making a function called "addButton" that uses render function to make a new button called "new button". In the JavaScript file, in line 8 I made a render function that should append a string to an element, which in this case will be on the empty div from earlier. I have a simple HTML document that includes a button named "click me" and also an empty div.
Thank you for checking out my article on learning how to add event listener to dynamically added element. Welcome to my second installment of "How to" guides
0 kommentar(er)
