jQuery: событие click для дочернего элемента в списке

Question

У меня есть скрипт в jQuery/PHP, который получает другие уровни в списке UL. Например:

<ul class="obj"> 
<li>Object A</li> 
<li>Object B</li> 
</ul> 

После нажатия на элемент LI, JQuery добавляет другой список к этому элементу, полученного POST:

<ul class="obj"> 
<li>Object A 
<ul class="obj"> 
<li>Object A1</li> 
<li>Object A2</li> 
</ul> 
</li> 
</li>Object B</li> 

Затем, когда я хочу, чтобы нажать на 'А1 Object' элемент и добавьте в него другой список, список добавляется к родительскому элементу, потому что оба являются элементами «.obj li». Мой код jQuery:

$(function(){ 
     $(".obj li").click(function(){ 
      var el = $(this); 
      $.post('get_rel.php', 
       function(data){ 
        $(el).append(data) 
        el = null; 
      }); 

     }) 
    }) 

Как вызвать событие щелчка именно на элементе clicked (child)? Спасибо за помощь.

Answer 1

Что вызывает это click() обработчик только быть привязан к элементам на странице в то время вы называете click(). Когда вы добавляете дочерние элементы в список, событие щелчка поднимается до верхнего уровня li, и обработчик события запускается. Здесь this - это верхний уровень li, поэтому появляются новые элементы.

Вместо этого, вы должны использовать делегирование событий, который будет срабатывать для всех текущих и будущих элементов и this внутри обработчика будет текущий элемент (важная часть в данном случае).

$(document).on('click', '.obj li', function() { 
    var el = $(this); 
    $.post('get_rel.php', 
     function(data){ 
      $(el).append(data) 
      el = null; 
    }); 
}); 

on() был введен в 1.7, так что если вы используете старую версию (и не можете обновить), вы должны использовать delegate():

$(document).delegate('.obj li', 'click', function() { 
    var el = $(this); 
    $.post('get_rel.php', 
     function(data){ 
      $(el).append(data) 
      el = null; 
    }); 
}); 

Answer 2

Вы можете использовать e.stopPropagation() в обработчике события