Dynamically created button not working jQuery

Hi tuukka uosukainen,

When we create new elements and add them to the DOM, they don't get bound by existing events we've set as jQuery only binds the event to existing elements that were in the DOM when the page loaded, to get around this we need to use what's called event delegation which is built into all modern browsers such as IE9 (older browsers such as IE8 get the same support using polyfills).

As the jQuery documentation for the .on() method shows, we can pass in a selector as the second parameter which is a string. Before we add this string we need to change our selector which in this case is $('.delete'), to a parent element which doesn't change. One element I generally like to use is body as it's always available and allows event bubbling all the way up the DOM giving our code more flexibility if we choose to expand our code structure in the future.

See the below to see how we can apply this to our code.

$('body').on('click', '.delete', deleteItem);

In the above example we can see that body is our selector we're binding our click event to, within the the on method we still have our event set as click, but now we have a new argument that is a string containing .delete which is the selector we want the browser to look for when it's clicked and when it is execute the deleteItem function.

Updated jsFiddle

Happy coding!