使用jQuery触发点击一个li元素

Question

我有一个动态生成

元素的

元素，只想运行一个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");
});

- Zabs

---

应该在元素后面添加类名。li.searchterm - Murali Murugesan

Answer 1

如果您动态添加了列表并在其中放置了点击事件，但要选择项目：

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

试用这个小工具: http://jsfiddle.net/emPKS/

- Edorka

Answer 2

去掉选择器中的空格

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

您还可以使用.on将特定事件附加到匹配的元素上。

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

Js Fiddle

- Sachin

---

哦天啊..我刚刚犯了那么严重的错误，哈哈 :-) 谢谢Sachin - 非常感激！ - Zabs

Answer 3

使用 .on()

由于您的内容是动态添加的，因此无法直接访问，所以必须使用事件委托。

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

- Tushar Gupta - curioustushar

Answer 4

你可以在不给 ul 分配 id 的情况下完成这个任务。

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

- Mohsin Shoukat

Answer 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>

而 JavaScript

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

- zzlalani

Answer 6

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

- kasper Taeymans