javascript - 如何访问通过 jquery 函数添加的 ul 中的列表项

Question

我主要在响应式导航栏上工作，如果当前窗口宽度不能容纳元素数，列表的最后一项将附加到另一个未排序的列表。

我的问题是我需要定位隐藏列表中的菜单项，当窗口宽度为 100% 时，该列表为空。我可以按照下面的 jQuery 访问可见列表的未排序列表，但不能访问隐藏列表。我知道我正在尝试访问尚不存在的元素，但一定有办法。

片段:

 var $vlinks = $('#hrmenu .visible-links');
 var $hlinks = $('#hrmenu .hidden-links');
 availableSpace = $vlinks.width() - 30;
 var
 break = [];
 areaAvail += w + 20;
 break.push(areaAvail);
 visibleItems = $vlinks.children().length;
 requiredSpace =
   break [visibleItems - 1];


 if (requiredSpace > availableSpace) {
   $vlinks.children().last().prependTo($hlinks);
 }

 $(document).ready(function() {

   //Visible list            
   $('#shuffle-btn > li > a').click(function(event) {
     $item = $(event.currentTarget).parent('li');
     console.log($item.index());
   });

   //Hidden list list             
   $('#hidshuffle-btn > li > a').click(function(event) {
     $item = $(event.currentTarget).parent('li');
     console.log($item.index());
   });

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="hrmenu" class="prdct-hrmenu">

  <ul id="shuffle-btn" class="visible-links">
    <li><a href="#">item-1</a>
      <ul>
        <li>Item-1-a</li>
      </ul>
    </li>
    <li><a href="#">item-2</a>
      <ul>
        <li>Item-1-a</li>
      </ul>
    </li>
    <li><a href="#">item-3</a>
      <ul>
        <li>Item-3-a</li>
      </ul>
    </li>
    <li><a href="#">item-4</a>
      <ul>
        <li>Item-4-a</li>
      </ul>
    </li>
  </ul>

  <ul id="hidshuffle-btn" class="hidden-links">
  </ul>

</nav>

Answer 1

由于隐藏列表中的元素在 DOM 就绪期间不可用，因此您需要定义一个点击处理程序，以便在这些元素可用时委托(delegate)给这些元素。您可以使用 JQuery 的 on 函数，如下所示。

 $(document).ready(function(){

   //Hidden list list             
   $('#hidshuffle-btn').on('click', ' li > a', function(event){
        var $item = $(event.currentTarget).parent('li');
        console.log($item.index());
   });

 });

这是一个示例 Pen在行动:)