Question

我基本上是在响应式导航栏上工作，如果当前窗口宽度不能容纳项目数，则列表的最后一项将被附加到另一个无序列表中。

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

段：

＆＃13;

 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());
   });

 });

＆＃13;

<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>

＆＃13;

Answer 1

由于隐藏列表中的元素在DOM准备就绪期间不可用，因此您需要定义一个可在这些元素可用时委派给这些元素的单击处理程序。您可以使用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正在运行：）

Answer 2

对于动态添加的元素，您只需要更改以下行：

$('#shuffle-btn > li > a').click(function(event) {

到

$(document).on('click', '#shuffle-btn > li > a', function(event) {

同样对于隐藏列表：

$('#hidshuffle-btn > li > a').click(function(event) {

到

$(document).on('click', '#hidshuffle-btn > li > a', function(event) {

** @ Arkantos的答案在性能方面更为正确。

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

2 个答案: