Need help adjusting JS code to make content work after it's been dynamically loaded using AJAX

Need help adjusting JS code to make content work after it's been dynamically loaded using AJAX

I'm having an issue where, after dynamically attempting to load content in through AJAX, the content isn't responsive to the JS code that it used to be.

Here's a jsfiddle of this navigation bar working *before* trying to dynamically loading it using AJAX... http://jsfiddle.net/neowot/m107L4mh/ (ignore that it's offset, lol)

But now it's just nonresponsive. I asked for similar help before and attempted to add proper event handlers, but clearly I'm still struggling.

Please help if you can. I'll try not to spam r/jquery again after this!

Thank you.

 

init.js

    $(document).ready(function() {
        
                    var nav, content, fetchAndInsert;
    
                    nav = $('nav#main');
                    content = $('section#content');
    
    
                    //Fetches and inserts content into the container
                    fetchAndInsert = function(href) {
                        $.ajax({
                            url: ' http://localhost/TTValid/content/' + href.split('/').pop(),
                            method: 'GET',
                            cache: false,
                            success: function(data){
                                content.html(data);
                            }                    
                        });
                    }; 
    
    
                    //User goes back/forward 
                    $(window).on('popstate', function() {
                        fetchAndInsert(location.pathname);
                    });
    
    
                    nav.find('a').on('click', function(e) {
                        var href = $(this).attr('href');
    
                        //Manipulate history
                        history.pushState(null, null, href);
    
                        //Fetch and insert content
                        fetchAndInsert(href);
    
    
                        e.preventDefault();            
                    });
          
    });

page1.js

    $(function () {
        
        var container = $('.navbar');
        
        $(document).on('click', '.navbar ul li a', function(event) { 
            $('.navbar > li:first-child > a').text($(this).text());
            $('.navbar > li > ul').addClass('hidden');
            $('.navbar li ul').slideToggle(100);
            $('.navbar ul li.gone').removeClass("gone");
            $(event.target).closest("li").addClass("gone");    
        });
        
        $(document).on('mouseenter', '.navbar > li', function(event) { 
            $(this).find('ul').removeClass('hidden');
        });
        
        $(document).on('click', '.ActiveListItem', function(event) { 
            $('.navbar li ul').slideToggle(300);
        });
    


        $(document).mouseup(function (e) {
            if (!container.is(e.target) // if the target of the click isn't the container...
            && container.has(e.target).length === 0) // ... nor a descendant of the container
            {
                $('.navbar li ul').slideUp(300);
            }
        });

    });


page1.php

    <?php
    require 'views/TTheader.php';
    ?>
    
    <section id="content">
        <?php require 'content/TTpage1.php'; ?>
    </section>
    
    <?php
    require 'views/TTfooter.php';
    ?>


content/page1.php

    <div id="navbarcontainer">
                    <ul class="navbar cf">
                        <li>
                            <a href="#" class="ActiveListItem">Category</a>
                            <ul>
                                <li><a href="#">Music</a></li>
                                <li><a href="#">Movie</a></li>
                                <li><a href="#">Book</a></li>
                                <li><a href="#">TV</a></li>
                                <li><a href="#">Game</a></li>
                                <li><a href="#">Activity</a></li>
                                <li><a href="#">Misc</a></li>
                            </ul>
                        </li>
                    </ul>
     </div>