jquery，选择ul里面的附加ul

我对jquery来说很新，我想选择一个被添加到列表中的元素。jquery，选择ul里面的附加ul

这里是追加后的HTML代码：

<!-- Show all folders in the directory --> 
<ul data-level="."> 
    <li> 
     <a href="" class="folder">Angular</a> 
    </li> 
    <li> 
     <a href="" class="folder">Html</a> 
    </li> 
    <li> 
     <a href="" class="folder">PHP</a> 
     <!--this is appended--> 
     <ul data-level="./PHP"> 
      <li> 
       <a href="">BankSimulation</a> 
      </li> 
     </ul> 
    </li> 
</ul> 

<script type="text/javascript" src="js/menu.js"></script>

，这里是JS文件：

$(document).ready(function() 
{ 
    $('.folder').parent().on('click', function() 
    { 
     var selector = this; 
     var dir = $(selector).parent().attr('data-level') + '/' + $(selector).text(); 

     $.ajax({ 
      url: 'init.php', 
      type: 'GET', 
      data: { 
       dir: dir, 
       JSON: true 
      }, 
      dataType: 'JSON', 
      success: function(data) 
      { 
       appendList(selector, data); 
      }, 
      error: function(error, errorCode, errorThrown) 
      { 
       console.log(error); 
      } 
     }); 

     return false; 
    }); 

    function appendList(selector, list) 
    { 
     var level = $(selector).parent().attr('data-level') + '/' + $(selector).text(); 

     $(selector).append('<ul data-level="' + level + '">' + encodeToLiTag(list) + '</ul>'); 
    } 

    function encodeToLiTag(element) 
    { 
     var summary = ''; 
     for(data in element) 
     { 
      var link = element[data]; 
      summary += '<li><a href>' + link + '</a></li>'; 
     } 

     return summary; 
    } 
});

我不觉得为什么它不工作的原因，代码似乎是有点简单，但我不知道事件是否因为它被追加而不起作用

来源

2014-12-29 nosthertus

如何制作的jsfiddle的问题..然后就可以快速得到答案。 – Rex

您正在绑定DOM准备好的点击事件。那时嵌套的ul不存在。所以，当他们被添加时，没有事件被绑定到他们。这就是为什么代码不能用于嵌套ul的原因，因为事件在添加后不会为嵌套ul启动。

要解决此问题，您必须使用事件委托（从here中读取事件委托部分）。

基本上你会将点击事件绑定到父/根ul。

$('ul[data-level=\\.]').on('click',function(e){ 
    var selector = e.target; 
    var dir = $(selector).parent().parent().attr('data-level') + '/' + $(selector).text(); 
    console.log(dir); 
});

给出

JsFiddle。

来源

2014-12-29 06:22:05 th1rdey3

你的答案是解决方案，我从来没有使用该函数的参数，并做出了工作，谢谢 – nosthertus

使用$(this)：

var selector = $(this);

来源

2014-12-29 06:00:00 RahulB

它选择第一个ul，而不是嵌套的ul – nosthertus

$（this）将为类别文件夹提供所单击的锚标签的对象。使用这个，你不能使用父（）方法 – RahulB

该问题是由于您的列表被添加到您的超链接中。

<li> 
<a href="" class="folder">Angular 
    <ul data-level="./Angular"> 
    <li><a href="" class="folder">Apple</a><li> 
    </ul> 
</a> 
</li>

当你有上面的代码，当你点击“苹果”，它会调用的“角”的情况下，因为“苹果”是考虑的“角”

一部分，而不是追加它超链接，我附加超链接旁边的列表。因此它不会导致错误的事件触发。

<li> 
<a href="" class="folder">Angular 
</a> 
<ul data-level="./Angular"> 
    <li><a href="" class="folder">Apple</a><li> 
</ul> 
</li>

此外，我还将事件从“打开”更改为“单击”，以避免事件附加到错误的选择器。我只会在列表追加时添加事件。

请找到下面的链接示例代码： http://jsfiddle.net/zeskysee/boe1yjsh/1/

希望这有助于：d

来源

2014-12-29 06:35:20 Zesky

jquery，选择ul里面的附加ul

回答

相关问题