Использование jQuery для 'click' элемента li

У меня есть элемент <ul>, который динамически генерирует элементы <li> и просто хочет запустить событие onclick

<ul id="results">
    <li class="device_result searchterm" data-url="apple-iphone-5s">
        <a href="#"> Apple iPhone 5s </a>
    </li>
    <li class="device_result searchterm" data-url="apple-iphone-5c">
        <a href="#"> Apple iPhone 5s </a>
    </li>
</ul>

У меня есть следующий jQuery в блоке $(document).ready, но он, похоже, не работает - какие-то идеи, что я делаю неправильно?

$("li .searchterm").click(function() {  
    console.log("testing");
});

Ответы

Ответ 1

если вы добавите динамически поместите клик в список, но выберите элементы:

$("#results").on("click", ".searchterm", function(event){
    console.log('clicked');
});

попробуйте скрипту: http://jsfiddle.net/emPKS/

Ответ 2

Удалить пробел в селекторе

  $("li.searchterm").click(function() {    
   console.log('testing');
});

и вы также можете использовать .on для присоединения определенного события к согласованным элементам

  $("li.searchterm").on("click",function() {    
   console.log('testing');
});

Js Fiddle

Ответ 3

Используйте . on()

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

$('#results').on('click','li.searchterm',function() {    
    console.log('testing');
});

Ответ 4

$( "li.searchterm" ).on('click',function() {    
   console.log('testing');
});

Ответ 5

Либо сделайте

$( "li .searchterm" ).on('click', function() {    
   console.log('testing');
});

ИЛИ

<li class="device_result searchterm" data-url="apple-iphone-5s" onclick="clickFunc(1)">
   <a href="#">Apple iPhone 5s</a>
</li>
<li class="device_result searchterm" data-url="apple-iphone-5c" onclick="clickFunc(2)">
   <a href="#">Apple iPhone 5s</a>
</li>

И Javascrip

function clickFunc(id) {
   console.log('Do something with ' + id);
}

Ответ 6

Вы можете сделать это без назначения id для ul

$('ul').on('click','li.searchterm',function(){
//do your stuffhere;
});