JQuery On Click Function not working after appending HTML

If you’ve ever come across this annoying issue, you may of become extremely frustrated, thinking why won’t this OnClick method just fire!! The issue is very easily fixed though, understanding why this happens first is a good place to start.

So Why Does It Happen?

JQuery OnClick Method is bound to an element or selector on page ready/load. Therefore if that element you want to click isn’t there at the time of page ready, the binding can’t happen. JQuery sits there and says why have you wrote this code with no HTML for me to attach to!?

Similarly, if the element was there on page load, it will work fine, but if you then take that element away and re-append it, you essentially delete the bound OnClick Event and it won’t re-bind.

Here is a snippet from the JQuery docs –

Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on()

How can I fix OnClick not working after re-append then?

The fix is easy enough, simply bind the OnClick event to the parent of the elements you want to be able to click on. That way, if the element you want to click on is removed and re appended, the handler will still be there listening as the parent was never removed.

Take the following code for example.
<button id="removeButton">
Remove Btn
</button>
<button id="addButton">
Add Btn
</button>

<div id="container">

<button id="boundOnPageLoaded">
Click Me
</button>

</div>
$( "#boundOnPageLoaded" ).click(function() {
alert("boundOnPageLoaded Button Clicked")
});

$( "#removeButton" ).click(function() {
$("#boundOnPageLoaded").remove();
});

$( "#addButton" ).click(function() {
$("#container").html('<button id="boundOnPageLoaded">Click Me</button>');
});

Result

So as you can see from the result –

Clicking the click me button will show an alert. After clicking the remove button and add button, the click me does not work. After removing the button and re-appending, the bound click event can’t work anymore.

This is where we need to modify the JavaScript to use delegation like so –

// Changed to On() method to use delegation from container
$( "#container" ).on("click", function() { 
alert("Delegated Button Clicked")
});
// Rest of code stays the same
$( "#removeButton" ).click(function() {
$("#boundOnPageLoaded").remove();
});

$( "#addButton" ).click(function() {
$("#container").html('<button id="boundOnPageLoaded">Click Me</button>');
});

Result

Now, no matter if you remove the button and add it again, the click event will always work because its delegated from the buttons parent.

Here is the jsFiddle if you want to play with the code!

Also here are a couple of good articles about this issue –

Summary

This article was written to hopefully shed light on a very common issue during development with JQuery. We have learnt why this so-called ‘bug’ happens and how to fix it. Really, you could argue that the fix should be the new default for using on click events in general, as it would completely remove the possibility of on click not working after appending html.

Interesting Links

Any comments about this issue are welcome.

JQuery On Click Function not working after appending HTML

You May Also Like

Leave a Reply

Your email address will not be published.