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似乎正确地附加了菜单的类名。每个单击侦听器都在一个单独的文件中，每个都在发出自己的AJAX请求（对于相同的.json文件）。

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

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

请告诉我，如果有任何简单的事情，我应该尝试一下。我暂时不会发布JavaScript代码 - 它相当冗长，但请告诉我它是否有用。

谢谢！杰克

以下是更改单击子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

如果您[动态]重新创建-l DOM元素，则这些元素不会在.menu__item中完成事件附件。对http://api.jquery.com/on/这种情况使用$(document).ready()方法。

jQuery.on

jQuery click listeners＆amp; AJAX请求 - 第二个侦听器不起作用

1 个答案: