jQuery 클릭 리스너 및 AJAX 요청-두 번째 리스너가 작동하지 않음

한 페이지에 두 개의 클릭 리스너가 있는데, 하나는 하위 탐색 ( <li>메뉴에서 동적으로 변경됨 ) 용이고 다른 하나는 메뉴 용 (즉, 다른 <ul>.

<nav class="sub-nav">
            <ul class="nav__list"> <!-- "sub-nav__item" has click listener -->
              <a id="general"   class="sub-nav__item sub-nav__item--active" href="#"><li>General</li></a>
              <a id="ordering"  class="sub-nav__item" href="#"><li>Ordering</li></a>
              <a id="payment"   class="sub-nav__item" href="#"><li>Payment</li></a>
              <a id="shipping"  class="sub-nav__item" href="#"><li>Shipping</li></a>
              <a id="receiving" class="sub-nav__item" href="#"><li>Receiving</li></a>
            </ul>
          </nav> 

          <div class="menu-holder">
            <ul class="menu"> <!-- "menu__item" has click listener and changes "content-area" -->
              <li class="menu__item menu__item--active" id="questions"><a href="#">Questions</a></li>
              <li class="menu__item" id="customer-inquiries"><a href="#">Customer Inquiries</a></li>
            </ul> <!-- menu -->
            <ul class="content-area">
              <li class="content-area__header">Questions</li>
              <li class="content-area__item"><p>If you have questions about these policies, please feel free to contact us at any time.</p><p>With your assistance, we can provide you and all of our customers with quality service and help everyone have a successful year!</p></li>
            </ul> <!-- sub menu -->
          </div> <!-- menu-holder -->

하위 탐색 리스너가 제대로 작동하지만 내 문제는 페이지가 처음로드 될 때만 메뉴 리스너가 작동한다는 것입니다. 하위 탐색 클릭 리스너를 활성화하고 콘텐츠가 변경되면 메뉴 클릭 리스너가 더 이상 작동하지 않습니다. 하위 탐색에 대한 내 자바 스크립트가 메뉴의 클래스 이름을 올바르게 추가하는 것 같습니다. 각 클릭 리스너는 별도의 파일에 있으며 각 리스너는 동일한 .json 파일에 대해 자체 AJAX 요청을 작성합니다.

javascript 파일에서 $('.sub-nav__item').click(function() {..code here..}및 $('.menu__item').click(function() {..code here..}을 호출하고 있습니다.

전 세계적으로 인식되지 않는 무언가와 관련이있는 직감이 있지만 javascript / jquery에 익숙하지 않기 때문에 어둠 속에서 촬영합니다.

내가 당신의 머리 위로 시도해야 할 간단한 것이 있으면 알려주십시오. 지금은 자바 스크립트 코드를 게시하지 않겠습니다. 다소 길지만 도움이되는지 알려주세요.

감사! Jake

다음은 sub-nav__item을 클릭 한 메뉴베이스를 변경하는 스크립트입니다.

$('.sub-nav__item').click(function() {  
    /* fade the dom out */ 
    $('.menu-holder')
        .fadeTo('.35s', '0')
        .delay(100);
    //console.log( "The ID is: " + $(this).attr('id') );

    /* remove other active classes */
    $('.sub-nav__item--active').removeClass('sub-nav__item--active');
    /* Adding the active class */
    $(this).addClass('sub-nav__item--active');

    /* clone the grid__cell */
    var gridCell = $(".menu").clone();      
    sleep(200); // allow the fade to occur

    /* make the request */
    ajaxRequest( $(this).attr('id'), gridCell );

    sleep(200); // allow the request to occur before fade in

    /* processing done...fade dom back in */
    $('.menu-holder').fadeTo('.75s', '1');
});

/*
 * This function submits the request for the JSON file for the sub-nav
 */
function ajaxRequest( reqID, gridCell ) {
    console.log("Request ID: " + reqID);

    var domObj =        "<li class=\"menu__item\" id=\"{{itemID}}\"><a href=\"#\">{{itemLink}}</a></li>"; 
    var domObjContent = "<li class=\"content-area__header\">{{contentHeader}}</li>"
                      + "<li class=\"content-area__item\">{{contentText}}</li>";

    $.ajax({
        type:"GET",
        url:"js/policies.json",
        success: function(response) {

            console.log("Request was successful.");

            /* clear the grid */
            $('.menu').empty();
            $('.content-area').empty();
            var content = [];
            var firstHasBeenFound = false;
            for( var i=0; i<response.data.length; i++) { 

                if( response.data[i].category == reqID.toString() ) {
                    content = response.data[i];

                    if( !firstHasBeenFound ) {
                        /* set default view */
                        $('.content-area').append( dom1ObjContent
                            .replace(/{{contentHeader}}/,   content.heading)
                            .replace(/{{contentText}}/,     content.verbiage) );
                        firstHasBeenFound = true;
                    }

                    / * For Debugging purposes */
                    // console.log( "The Response is: "
                                //       + content.category +
                                //     ", " + content.heading );

                    /* add li to menu */
                    $('.menu').append( domObj
                        .replace(/{{itemLink}}/,        content.heading) 
                        .replace(/{{itemID}}/,          content.tag) );
                } 
                else {
                    console.log("At least one item did not match");
                }
              } /* for */
              firstHasBeenFound = false; // resetting the boolean
        }, /* success funct */  
    }); /* ajax */
    console.log("AJAX Request Done.");
} /* ajaxRequest */