jquery select добавленные элементы

Question

Столкнувшись с проблемой, что jquery не позволяет выбрать добавленный элемент. Я видел много советов, как его решить. Например:

var $li = $('<li><span>' + html + '</span></li>'); 
$('.top').append($li); 

Но она не может помочь мне в моем пути. Я получаю из списка серверов записи из базы данных в формате json и в моем представлении, и я зацикливаюсь на этом списке и генерирую некоторую структуру html.

Например:

$.getJSON("/searchbytype", data, function(data) { 
    $.each(data, function(key, val) { 
     $('items').append('<li class="item">'+ val.name + '</li>'); 
    }); 
}); 

И то, что я хочу делать дальше, это нажать на какой-то li пункт и сделать некоторые манипуляции. Ul список может содержать 100-200 li теги. Любые идеи были бы хорошы!

Answer 1

Я думаю, что нужно для проведения делегирования

$('body').on('click', 'li', function(){ 
    // this handler will work even for dynamically created <li> 
}); 

Answer 2

Вы можете сделать это следующим образом:

$.getJSON("/searchbytype", data, function (data) { 
    $.each(data, function (key, val) { 
     $('<li>', { 
      class: 'item' 
     }).html(val.name).on('click', function() { 
      // Your code here. 
     }).appendTo('.items'); 
    }); 
}); 

Примечание: Я предполагаю, что контейнер является элементом с class равен items, поэтому я добавил недостающий . префикс его в jQuery селектор.