使用jQuery来 "点击 "一个li元素

Question

我有一个 <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");
});

Answer 1

如果你添加dinamically把点击列表，但选择的项目。

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

在提琴上试试。http:/jsfiddle.netemPKS。

Answer 2

删除选择器中的空格

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

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

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

Js Fiddle

Answer 3

使用 .on()

由于你的内容是动态添加的，所以不能直接访问，所以你必须使用事件授权。

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

Answer 4

要不这样做

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

Answer 5

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

Answer 6

你可以在不给ul指定id的情况下进行。

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