JQuery, выберите добавленную ul внутри ul

Question

Я довольно новичок в jquery, и я хочу выбрать элемент, который добавляется внутри списка.

здесь HTML-код после Append:

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

я не найти причину, почему он не работает, то код, кажется, немного просто, но я не знаю, если событие не работает, потому что оно добавляется

Answer 1

Вы привязываете событие click к DOM ready. В то время вложенная ul не существует. Таким образом, ни одно событие не связано с ними при их добавлении. Вот почему код не будет работать для вложенной ul, потому что событие не запускается для вложенной ul после их добавления.

Чтобы решить эту проблему, вам необходимо использовать делегирование событий (часть делегирования события чтения от here).

В основном вы привяжете событие click к родительскому/корневому 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 дал.

Answer 2

Использование $(this):

var selector = $(this); 

Answer 3

Проблема связана с тем, что ваш список добавлен в вашу гиперссылку.

<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