在没有.live（）的情况下调用AJAX后加载JS单击处理程序？

Question

小男孩，我很尴尬这么快就回到这里，但我正在努力学习的不只是大量的HTML / CSS技巧。我不仅仅是一名设计师，而是一名开发人员，但我正努力尽我所能改变这一点 - 所以提前感谢所有的帮助！

长话短说：我正在使用AJAX来避免页面重新加载。我使用click事件将外部.php文件中的内容加载到名为#content的div中。当我使用#content之外的链接时，这很有用，也就是在导航栏中，它是静态的并且不会改变。当我尝试在#content中创建链接时，它不起作用，其中的内容是从包含HTML的一组外部.php文件生成的。

例如，我使用导航转到“Foo”。在“Foo”中，有一个指向“Bar”的链接。如果我单击“Bar”，它应该将包含“Foo”的div替换为“Bar”，但不执行任何操作。但是，如果我使用导航去“Bar”，它可以正常工作。

（这有意义吗？）

我发现（有帮助）这是因为AJAX已经完成了它的工作，所以我需要设置一个点击处理程序来处理已加载的东西。我试图在这里找到的所有来源都提出了.live（），但这已被弃用了。解决方案似乎是.on（），但我已经将它用于我的主处理程序。我尝试用另一个名字制作另一个，但没有完成任何事情，所以我被卡住了。

我想知道我可以对我的脚本做些什么来使它工作，或者建议如何搞乱它。这就是我所拥有的（随意将它钉在十字架上）：

$(document).ready(function(e) {
    
    /* AJAX request handling, JS click event handler, animations */
    
    // Request content for placement
    function requestContent(url,id) {
            var http;
            if (window.XMLHttpRequest) {
               try { http = new XMLHttpRequest(); }
               catch(e) {}
               } 
            else if (window.ActiveXObject) {
               try { http = new ActiveXObject("Msxml2.XMLHTTP"); }
               catch(e) {
                  try { http = new ActiveXObject("Microsoft.XMLHTTP"); } 
                  catch(e) {}
                  }
               }
            if(! http) {
               alert('\n\nSorry, unable to open a connection to the server.');
               return false;
               }
            http.onreadystatechange = function() { publishContent(http,id); };
            http.open('GET',url,true);
            http.send('');
        }

    // Dump content from RequestContent into #content DIV
    function publishContent(content,id) {
            try {
               if (content.readyState === 4) {
                  if(content.status === 200) {   document.getElementById(id).innerHTML=content.responseText; }
                  else { alert('\n\nContent request error, status code:\n'+content.status+' '+content.statusText); }
                  }
               }
            catch(error) { alert('Error: '+error.name+' -- '+error.message); }
            }
    
    // Navigation click events
    $('.naviLink').on('click', function(e) {
        event.preventDefault();
        window.location.hash = this.hash; // Remove hash at end of URLs
        $('#content').hide(); // Prepare for new content, still testing this
        var content = $(e.currentTarget).data('request-content'); // Bind request to click
        requestContent('' + content , 'content');
        // Fade in animations, still testing
        $('#content').toggle(function() {
            $('#content').fadeIn('slow');
        });             
    });

   // Generated content click events
   $('.innerLink').on('click', function(e) {
    event.preventDefault();
    window.location.hash = this.hash; // Remove hash at end of URLs
    $('#content').hide(); // Prepare for new content
    var content = $(e.currentTarget).data('request-content'); // Bind request to click
    requestContent('' + content , 'content');
    // Fade in animations
    $('#content').toggle(function() {
        $('#content').fadeIn('slow');
        });             
    });
    
});

我不确定这是否有用，但这里是我如何使用事件链接事物的示例。这个HTML将在#content div中，从外部源加载。

<h1>Example From Within Externally Generated Content</h1>

        <p>"Foo bar foo bar foo foo foo bar."</p>

        <h1>Foo</h1>
        <p><b>
            <a href="#" class="innerLink" data-request-content="foo">Check out</a> Foo!</b>
        </p>

        <h1>Bar</h1>
        <p><b>
            <a href="#" class="innerLink" data-request-content="bar">See</a> some Bar!</b>
        </p>

我希望这很简单。谢谢！