jquery on click 事件不适用于无序列表中的列表项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4699486/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery on click event not working on list items within unordered list
提问by Elitmiar
I have the following list withing an unordered list with id #sortable1, what I want to achieve is whenever a li element is clicked withing < ul id="sortable2"> an onclick event should happen and alert the id from the li element that was clicked. I have one element also within the unordered list that should not be clickable with the class="emptyMessage"
我有以下列表，其中包含一个带有 id #sortable1 的无序列表，我想要实现的是每当使用 < ul id="sortable2"> 单击 li 元素时，都应该发生 onclick 事件，并从 li 元素发出警报点击。我在无序列表中也有一个元素，该元素不应使用 class="emptyMessage" 进行点击
I got stuck and dont know how to proceed
我被卡住了，不知道如何继续
So far I have
到目前为止我有
<ul id="sortable1" class="connectedSortable ui-sortable">
<li class="ui-state-default" id="1">Name1</li>
<li class="ui-state-default" id="2">Name2</li>
<li class="ui-state-default" id="3">Name3</li>
<li class="ui-state-default" id="4">Name4</li>
<li class="ui-state-default" id="5">Name5</li>
<li style="display: list-item;" class="emptyMessage">No more contacts available</li></ul>
My JQUERY code
我的 JQUERY 代码
$("#sortable1 li").click(function() {
alert('Clicked list.'+$(this).value);
});
回答by jAndy
This should do it:
这应该这样做：
$("#sortable1 li").not('.emptyMessage').click(function() {
alert('Clicked list. ' + this.id);
});
回答by Jimmy Chandra
$("#sortable1 > li.ui-state-default").click(function() {
alert("Clicked list " + $(this).attr("id"));
});
回答by akshaync
use this to be more specific while selecting
在选择时使用它更具体
$(document).ready(function () {
$("ul#sortable1 li").click(function() {
alert("Clicked list." + $(this).text());
});
});
回答by Skilldrick
There's a syntax error in your JavaScript. It should be:
您的 JavaScript 中存在语法错误。它应该是：
$("#sortable1 li").click(function() {
alert("Clicked list." + $(this).value);
});
Also, I think you mean $(this).html(), not $(this).value- <li>s don't have a value (and it would be .val()on a jQuery object).
另外，我觉得你的意思是$(this).html()，不是$(this).value-<li>都不具备的一个值（这将是.val()一个jQuery对象）。
回答by shybovycha
Maybe wrong selector? Here's my code (works just fine):
也许错误的选择器？这是我的代码（工作得很好）：
<html>
<head>
<title>MooExample</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#sortable1 > li").click(function() {
alert($(this).html());
});
});
</script>
</head>
<body>
<ul id="sortable1" class="connectedSortable ui-sortable">
<li class="ui-state-default" id="1">Name1</li>
<li class="ui-state-default" id="2">Name2</li>
<li class="ui-state-default" id="3">Name3</li>
<li class="ui-state-default" id="4">Name4</li>
<li class="ui-state-default" id="5">Name5</li>
</ul>
</body>
</html>
UPD:i'm sorry, i think <li>items have no val()property =)
UPD：对不起，我认为<li>项目没有val()属性 =)
