href="#" doesn't work if returned by php ajax function

Question

I have an html page with a div (id=reqs). I want to load the html content of the div after the page has loaded. so I created an ajax call that uses php to get data from the database and "echos" it into html code to be populated into the div.

My html:

<html>
<body>
<div class="content" id="reqs"></div>

            <script> $(document).ready(function() {
                $.ajax({
                     type: "GET",
                     url: '../getreqs',
                     success: function(data) {
                        $('#reqs').html($data);
                     }
                });             });         </script>

</body>
</html>

My php ajax function:

                $data .= "<div class=\"toggle store-history-toggle\">";
                $data .= "<a href='#' class=\"toggle-title\"><strong class=\"bg-yellow-dark\">" . "YP" . "</strong>" . "ER" . "<i class=\"fa fa-plus\"></i></a>";
                $data .= "<div class=\"toggle-content\">";
                $data .= "<div class=\"cart-costs\">";
                $data .= "<h4>Details</h4>";
                $data .= "<h5><strong>Name</strong><em>John Doe</em></h5>";
                $data .= "</div>";
                $data .= "</div>";
                echo $data;

My problem is that my href="#" (which should expand the div showing the details below it) doesn't work, but if I copy the exact same html resulting from my php and paste it into my html it works perfectly.

More Info: - My html code is in the folder "htmlroot/subfolder" - My php code is in the folder "htmlroot"

My Attempts at solving it: - I switched between herf="#" and href='#' - I had the php code give me href="LINKREF", and had my ajax function after getting the data to replace LINKREF with #

var res = String(data).replace(/LINKREF/g, "#");

none of theses attempts work though

[Related question](http://stackoverflow.com/a/32588312/863110) — Mosh Feu, Nov 15 '16 at 10:17
can you show the snippet of the working one that is not using php ajax? — coriano35, Nov 15 '16 at 10:25
Shouldn't `$('#reqs').html($data);` be `$('#reqs').html(data);` instead under `.success()`? — Ren, Nov 15 '16 at 10:44

score 1 · Accepted Answer · answered Nov 15 '16 at 10:17

href="#" is a link to the top of the page. It will never, under any circumstances, expand the div.

Presumably you have some JavaScript which looks for links and binds itself to them so that when you click the link, the JS fires, and then the JS expands the div.

(NB: It doesn't make sense to bind that sort of JS to a link to the top of the page. A button element would be more apropriate).

You need to find the JS and either:

Change it to use delegated event handlers
Run it on the new DOM elements the JS you put in the question is adding

href="#" doesn't work if returned by php ajax function

1 Answers1