Mustafa Mustafa - 1 month ago 7x
Ajax Question

JQuery not working on AJAX Request

So I have 2 pages. transfer.php and display_guide.php. I call display_guide.php using an AJAX Request to display it on tranfer.php. There is a simple toggle function on display_guide.php and it works just fine when I test it alone. However the toggle function does not work when on transfer.php using the AJAX Call. Any help would be greatly appreciated.

I have looked on other articles and they all suggested that I use the .on method and I have done so. Some side information: I am using Bootstrap, but even when I comment out the bootstrap link, the error persists -- so it can't be bootstrap.

The code for display_guide.php is as follows:

<!-- GENED TABLE WITH CATEGORY IMPLEMENTATION----------------------------------->

<button id="sri">Toggle between hiding and showing the paragraphs</button>
<p>This is another small paragraph.</p>

$(document).on("click", "button", function(){

However, when I want this toggle to be reflected in transfer.php, I have issues. The content loads but it refuses to toggle when I click on the button. It does not mimic the behavior of the standalone page (display_guide.php).


Move your toggle code inside ajax callback inside transfer.php file, to attach event to object after the html has been appended.

      function loadTransferGuide(str3) {
        var xhttp3 = new XMLHttpRequest();
        xhttp3.onreadystatechange = function() {
            if (xhttp3.readyState == 4 && xhttp3.status == 200) {
                document.getElementById("transfer_guide").innerHTML = xhttp3.responseText;
                $(document).on("click", "button", function(){
        };"GET", "display_guide.php", true);