在通过AJAX动态加载内容后调整JS以处理内容？

Question

我遇到的问题是，在动态尝试通过AJAX加载内容后，内容不会响应过去的JS代码。

这是尝试使用AJAX动态加载它之前工作的导航栏的jsfiddle ... http://jsfiddle.net/neowot/m107L4mh/

但现在它只是没有反应。之前我曾要求提供类似的帮助，并试图添加适当的事件处理程序，但显然我还在苦苦挣扎。

如果可以，请帮忙。

谢谢。

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';
?>

内容/ 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>