0

So, I have a function that at first was supposed to work with my navbar. I click in some link and it load a page trough AJAX inside a #content div. But what if I have a link inside that div?

I mean, AJAX call a page that contains a link that is supposed to word with AJAX too, but that works only when I access page directly (if the content inside the #content div wasn't called by AJAX), otherwise it runs like a normal href link.

My AJAX function:

              $(function() {
                $('a').click(function(e) {

                    $("#loading").show();
                    $("#content").animate({ opacity: 0 });
                    var href = $(this).attr("href");
                    ajaxtitle = $(this).attr("ajaxtitle");
                    //this.a = ajaxtitle;

                    loadContent(href);

                    // HISTORY.PUSHSTATE
                    window.history.pushState('', ajaxtitle, href);
                    document.title = ajaxtitle;
                    e.preventDefault();

                });

                //MAKE BACK/FORWARD WORKS
                window.onpopstate = function(event) {
                    $("#loading").show();
                    //console.log("pathname: "+location.pathname);
                    loadContent(location.pathname);
                };
            })

        //AJAX ITSELF
        function loadContent(url){
            $.ajax({
                url: url,
                type: 'GET',
                error: function(){
                    alert("O");
                },
                success:
                function(data){
                    $('#content').html(data);
                    $("#loading").hide();
                    $("#content").animate({ opacity: 1 })
                }

                });

                // MAKE NAVBAR ACTIVE
                $('li').removeClass('active');
                $('a[href="'+url+'"]').parent().addClass('active');
                //window.history.pushState('', ajaxtitle, href);
            };

And an example of my links, just to complement:

<a href="projects" ajaxtitle="Projects">PROJECTS</a>

What I have to do to have my AJAX-called links working?

dreamweiver
  • 6,002
  • 2
  • 24
  • 39
Igor
  • 131
  • 3
  • 10
  • Are you saying that `loadContent` didnt work as it was triggered from the content which was loaded by ajax already ? – dreamweiver Feb 22 '16 at 13:26
  • Sorry I was typing an answer when it was closed! – CompanyDroneFromSector7G Feb 22 '16 at 13:29
  • I've read question 3 times. Still I don't get it. Can you reproduce again? – Manoz Feb 22 '16 at 13:30
  • Sorry folks, I didn't found an thread about that, but @dreamweiver linked topic was exactly what I searching for. Sorry again for the duplicated question =) – Igor Feb 22 '16 at 13:31
  • 1
    actually the reason your code is not working is because the events from newly added html content is not triggering the respective event handler,only way to solve this is by event delegation. So @Quentin is right, this is duplicate question. what you need to do is to attach the event to the top most element in your script. like `document`. refer the original question to know more – dreamweiver Feb 22 '16 at 13:38

0 Answers0