Добавление соседних узлов в список вложенных

Question

Учитывая следующую разметку:

<div id="nodes"> 
    <ul> 
     <li><a href="#">Colors</a> 
      <ul> 
       <li><a href="#">Red</a></li> 
       <li><a href="#">Green</a></li> 
       <li><a href="#">Blue</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Sizes</a></li> 
     <li><a href="#">Material</a></li> 
    </ul> 
</div> 

Я написал функцию JQuery, чтобы добавить одноуровневые узлы:

$("#nodes ul li").click(function(e) { 
    addSibling(this, 'new one'); 
    e.stopPropagation(); 
}); 

function addSibling(selector, content){ 
    var markup='<li><a href="#">' + content + '</a></li>'; 
    $(selector).parent().append(markup); 
} 

Сначала кажется, отлично работает, до тех пор, как Я нажимаю на исходные узлы. Например, если я нажимаю на «Blue», я получаю:

<div id="nodes"> 
    <ul> 
     <li><a href="#">Colors</a> 
      <ul> 
       <li><a href="#">Red</a></li> 
       <li><a href="#">Green</a></li> 
       <li><a href="#">Blue</a></li> 
       <li><a href="#">new node</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Sizes</a></li> 
     <li><a href="#">Material</a></li> 
    </ul> 
</div> 

Однако, когда я нажимаю на новом узле, вместо того, чтобы новые узлы, как родной брат, он заканчивает один уровень вверх (То есть, брата «Цвета», «Размер» и «Материал»). Глядя на разметку, сгенерированную jQuery, я не вижу никакой разницы, поэтому я преувеличиваю, почему новые узлы действуют отличные от исходных. Благодарю.

Answer 1

Я хотел бы предложить:

$("#nodes ul").click(function (e) { 
    addSibling(e.target, 'new one'); 
    e.stopPropagation(); 
}); 

function addSibling(selector, content) { 
    var markup = '<li><a href="#">' + content + '</a></li>'; 
    $(selector).parent().append(markup); 
} 

JS Fiddle demo.

Это связывает Click-обработчик к ul элементам, и вместо this он использует e.target, который является элементом, который был нажат в ul. Это означает, что вы избегаете проблемы с привязкой обработчика события клика к вновь добавленным элементам.

Answer 2

Причина этого заключается в том, что jquery регистрирует ваш обратный вызов вашего клика уже существующим объектам. Когда вы нажимаете на вновь созданный ли, он просто пузырится и стреляет на один уровень выше.

Кроме того: у вас есть класс = "узлы", и вы хотели иметь id = "узлы".

Как это исправить? Попробуйте зарегистрировать свой клик на ul (not li) и в addSibling удалить родителя.

Answer 3

С тех пор, как вы добавляете новый узел в DOM, вы не прикрепляете к нему событие клика, базовое «li» регистрирует щелчок и прикрепляет узел к этому. Чтобы исправить это, в своей функции addSibling после создания нового узла прикрепите к нему событие click.

Answer 4

Ваша проблема в том, что у вашего недавно созданного <li> s не было привязанного к ним обработчика событий. Это связано с тем, что когда вы вызываете $("#nodes ul li").click(...), только элементы, которые соответствуют селектору, получают прикрепленные к ним обработчики. Когда эта функция вызывается, она не будет вызываться снова, когда новые элементы будут добавлены в DOM. В результате ваш клик по новому <li> s «пузырится вверх», пока он не достигнет <li>, у которого уже есть обработчик событий.

Вы можете решить эту проблему с помощью обработчика делегата щелчка, а не один непосредственно на элементе:

$("#nodes").on("click","li",function(e) { 
    addSibling(this, 'new one'); 
    e.stopPropagation(); 
}); 

Как это работает следующим образом:
Вы придаете только один обработчик щелчка к #nodes элемент. Когда вы нажимаете на любой <li> внутри элемента nodes, функция запускается. И поскольку он применяется ко всем <li> s внутри элемента #nodes, не имеет значения, если они динамически созданы.