Ajax not working after load or click Jquery event - Solution






Ajax not working after load or click Jquery event


You may have found yourself stuck with Ajax calls not working when passing your html pages into your main index.html.

In this case, because you load your html pages as an ajax call already using the .on() Jquery function, the click event will not work anymore, but there is a trick around that!

in your index.html page add this:

<div id="load-pages"></div>

We will pass all our html pages inside this div.

Make sure you add an id, in this case "load-pages".


Now the magic, let's say this is your button in the pages/login.html as:
<a href="#" type="button" class="button" id="signin">Sign in</a>

Instead of using this:

$('#load-pages').on('click', function (e) {
    e.preventDefault();
//Your Ajax code here

});

Simply use a Parent id like this:

$('#load-pages').on('click','#signin', function (e) {
    e.preventDefault();
//Your Ajax code here

});

Now with this simple trick, you will be able to finally have your AJAX triggered from your Child pages.

If this tutorial helped you, please do not hesitate to leave us a message!