jQuery 点击侦听器 & AJAX 请求 -- 第二个侦听器不工作

Question

我在一个页面上有两个点击侦听器，一个用于子导航（动态更改菜单中的 <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 -->

子导航监听器工作正常，我的问题是菜单监听器仅在页面首次加载时工作。一旦我激活子导航点击监听器并且内容发生变化，菜单点击监听器就不再起作用。我的子导航 javascript 似乎正确地附加了菜单的 class 名称。每个点击侦听器都在一个单独的文件中，每个都在发出自己的 AJAX 请求（对同一个 .json 文件）。

我打电话给 $('.sub-nav__item').click(function() {..code here..} 和 javascript 文件中的 $('.menu__item').click(function() {..code here..}。

我有一种预感，它与全球未被识别的东西有关，但我对 javascript/jquery 还很陌生，所以只是在黑暗中拍摄。

请让我知道是否有任何简单的事情我应该尝试一下。我暂时不会发布 JavaScript 代码——它相当冗长，但请告诉我它是否有帮助。

谢谢！杰克

这是用于更改单击 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 */

Answer 1

如果您动态地[重新]创建.menu__item DOM 元素，这些元素没有在$(document).ready() 中完成的事件附件。对于这种情况 http://api.jquery.com/on/.

使用 jQuery.on 方法

$(".menu").on("click", ".menu__item", function() {...});

jQuery 点击侦听器 & AJAX 请求 -- 第二个侦听器不工作

jQuery click listeners & AJAX request -- Second listener does not work

html

ajax

jquery

click

listener