使用 jQuery 来“点击”一个 li 元素答案

【问题标题】：Using jQuery to 'click' a li element使用 jQuery 来“点击”一个 li 元素
【发布时间】：2013-10-06 03:27:13
【问题描述】：

我有一个动态生成<li> 元素的<ul> 元素，并且只想运行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>

我在 $(document).ready 块中有以下 jQuery，但它似乎不起作用 - 知道我做错了什么吗？

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

【问题讨论】：

类名应与元素一起添加。 li.searchterm

标签： javascript jquery html onclick document-ready

【解决方案1】：

你可以在不为 ul 分配 id 的情况下做到这一点

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

【讨论】：

【解决方案2】：

删除选择器中的空格

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

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

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

Js Fiddle

【讨论】：

omg.. 我只是让 EPIC 失败然后大声笑 :-) 感谢 Sachin - 非常感谢！

【解决方案3】：

随便

$( "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);
}

【讨论】：

【解决方案4】：

如果您动态添加，请点击列表但选择项目：

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

试试小提琴：http://jsfiddle.net/emPKS/

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

使用.on()

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

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

【讨论】：