<li> 标签的 jQuery onclick 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6365255/
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 onclick event for <li> tags
提问by afshin
I have the following menu items generated by a template generator, artisteer:
我有以下菜单项由模板生成器 arteer 生成：
<ul class="art-vmenu">
<li><a href="#" ><span class="l"></span><span class="r"></span>
<span class="t">Home</span></a></li>
<li><a href="#" ><span class="l"></span><span class="r"></span>
<span class="t">Create User</span></a></li>
<li><a href="#" class="active"><span class="l"></span><span class="r"></span>
<span class="t">List Users</span></a></li>
<li><a href="#"><span class="l"></span><span class="r"></span>
<span class="t">Admin</span></a></li>
</ul>
I want to capture the onclick event for <li>with a single jQuery function:
I've tried this which is incomplete:
我想<li>用一个 jQuery 函数捕获 onclick 事件：我试过这个，这是不完整的：
$(document).ready(function()
{
$('ul.art-vmenu li').click(function(e)
{
alert(this);
});
});
I can go as far as seeing this is a HTMLliElement but cannot figure how to get the menu text or id for it?
我可以看到这是一个 HTMLliElement，但无法弄清楚如何获取菜单文本或 ID？
How is menu click usually captured with jQuery?
jQuery 通常如何捕获菜单点击？
回答by Locksfree
Here, to get the text of the menu that triggered the event (does not seem to have any id):
在这里，要获取触发事件的菜单文本（似乎没有任何 id）：
$(document).ready(function()
{
$('ul.art-vmenu li').click(function(e)
{
alert($(this).find("span.t").text());
});
});
回答by Manoj Saini
In your question it seems that you have spanselector with given to every spana seperate class into ul lioption and then you have many answers, i.e.
在您的问题中，您似乎有span选择器将每个span单独的类分配给ul li选项，然后您有很多答案，即
$(document).ready(function()
{
$('ul.art-vmenu li').click(function(e)
{
alert($(this).find("span.t").text());
});
});
But you need not to use ul.art-vmenu lirather you can use direct ulwith the use of onas used in below example :
但是您不需要使用，ul.art-vmenu li而可以直接ul使用on，如下例中使用的那样：
$(document).ready(function()
{
$("ul.art-vmenu").on("click","li", function(){
alert($(this).find("span.t").text());
});
});
回答by Lexx Koto
You can get the ID, or any other attribute, using jQuery's attrib function.
您可以使用 jQuery 的 attrib 函数获取 ID 或任何其他属性。
$('ul.art-vmenu li').attrib('id');
To get the menu text, which is in the t span, you can do this:
要获取 t 跨度中的菜单文本，您可以执行以下操作：
$('ul.art-vmenu li').children('span.t').html();
To change the HTML is just as easy:
更改 HTML 也同样简单：
$('ul.art-vmenu li').children('span.t').html("I'm different");
Of course, if you wanted to get all the span.t's in the first place, it would be simpler to do:
当然，如果你想首先获得所有的span.t，这样做会更简单：
$('ul.art-vemnu li span.t').html();
But I'm assuming you've already got the li's, and want to use child() to find something within that element.
但我假设您已经获得了 li，并且想要使用 child() 在该元素中查找某些内容。
回答by James Allardice
I'm not really sure what your question is, but to get the text of the lielement you can use:
我不太确定您的问题是什么，但要获取li您可以使用的元素文本：
$(this).text();
$(this).text();
And to get the idof an element you can use .attr('id');. Once you have a reference to the element you want (e.g. $(this)) you can perform any jQuery function on it.
要获取id元素的 ，您可以使用.attr('id');. 一旦获得了对所需元素的引用（例如$(this)），您就可以对其执行任何 jQuery 函数。
回答by Bertrand Marron
thisis a HTML element.$(this)is a jQuery object that encapsulates the HTML element.
this是一个 HTML 元素。$(this)是一个封装了 HTML 元素的 jQuery 对象。
Use $(this).text()to retrieve the element's inner text.
使用$(this).text()检索元素的内部文本。
I suggest you refer to the jQuery API documentationfor further information.
我建议您参考jQuery API 文档以获取更多信息。
回答by CraigW
Typing in $(this)will return the jQuery element instead of the HTML Element. Then it just depends on what you want to do in the click event.
输入$(this)将返回 jQuery 元素而不是 HTML 元素。然后它只取决于你想在点击事件中做什么。
alert($(this));
alert($(this));
回答by jk.
$(document).ready(function() {
$('ul.art-vmenu li').live("click", function() {
alert($(this).text());
});
});
jsfiddle: http://jsfiddle.net/ZpYSC/
jsfiddle：http: //jsfiddle.net/ZpYSC/
jquery documentation on live(): http://api.jquery.com/live/
关于 live() 的 jquery 文档：http: //api.jquery.com/live/
Description: Attach a handler to the event for all elements which match the current selector, now and in the future.
描述：为当前和将来与当前选择器匹配的所有元素的事件附加一个处理程序。
