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:
<body>
<!-- GENED TABLE WITH CATEGORY IMPLEMENTATION----------------------------------->
<button id="sri">Toggle between hiding and showing the paragraphs</button>
<p>This is another small paragraph.</p>
<script>
$(document).on("click", "button", function(){
$("p").toggle();
});
</script>
</body>
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).