jQuery jquery从链接为li分配onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/910850/
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 assign onclick for li from a link
提问by Tim Jarvis
I have a list of items
我有一个物品清单
<ul class="list">
<li>
<a href="#Course1" class="launch" onclick="alert('event 1')">event 1</a>
</li>
<li class="alt">
<a href="#Course2" class="launch" onclick="alert('event 2')">event 2</a>
</li>
<li>
<a href="#Course3" class="launch" onclick="alert('event 3')">event 3</a>
</li>
<li class="alt">
<a href="#Course4" class="launch" onclick="alert('event 4')">event 4</a>
</li>
</ul>
I want to be able to assign the onclick of the link to the onclick of the li aswell
我希望能够将链接的 onclick 分配给 li 的 onclick
My attempt so far is one click behind (as I am assigning the script to the onclick rather than executing the script)
到目前为止，我的尝试是一键点击（因为我将脚本分配给 onclick 而不是执行脚本）
$('.list li').click(function() {
var launch = $('a.launch', this);
if (launch.size() > 0) { this.onclick = launch.attr('onclick'); }
});
Thanks in advance Tim
提前致谢蒂姆
回答by TheVillageIdiot
building on @Thomas Stock'sanswerthe following code prevents double execution on clicking on link instead of li. (got it from herejQuery site)
以@Thomas Stock 的回答为基础，以下代码可防止单击链接而不是 li 时重复执行。（从这里得到它jQuery 站点）
$(document).ready(function() {
$('ul.list li').click(function(e) {
var $target = $(e.target);
if(!$target.is("li")) //magic happens here!!
{
return;
}
var launch = $('a.launch', this);
if (launch.size() > 0)
{
eval(launch[0].onclick());
}
});
});
回答by Gromer
Are you doing this so the whole li block is a clickable link instead of just the a element? If so, you could easily do this with CSS instead.
你这样做是为了让整个 li 块是一个可点击的链接，而不仅仅是 a 元素？如果是这样，您可以使用 CSS 轻松地做到这一点。
HTML:
HTML：
<html>
<head>
<title>Testing Block Elements</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<ul id="menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</body>
</html>
CSS:
CSS：
#menu {
list-style: none;
padding: 0;
margin: 0;
}
#menu li {
/* Added to show the whole li element will be a clickable link. */
width: 250px;
border: 1px solid #000000;
}
#menu li a {
display: block;
}
EDIT:
编辑：
And by doing this, you only need to attach the click event to the a tag if you really need to do some javascript when the user clicks on it.
通过这样做，如果你真的需要在用户点击它时执行一些 javascript，你只需要将点击事件附加到 a 标签。
回答by Mario Menger
Loop over the li using each instead of using click:
使用 each 而不是使用 click 循环遍历 li：
$(document).ready(function(){
$('.list li').each(function() {
var launch = $('a.launch', this);
if (launch.size() > 0) { this.onclick = launch.attr('onclick'); }
});
});
回答by Thomas Stock
$('.list li').click(function() {
var launch = $('a.launch', this);
if (launch.size() > 0) { eval(launch.attr('onclick')) }
});
Mario's solution will also work. Mine will take the child 's onclick event and execute it, on the actual click.
马里奥的解决方案也将起作用。我的将获取孩子的 onclick 事件并在实际点击时执行它。
Mario's solution will bind the 's onclick event to the li's on document load. Pick what suits you best.
Mario 的解决方案将 's onclick 事件绑定到 li's on document load。选择最适合您的。
回答by Collin Allen
Your best bet is probably to pick one specific element type -- perhaps the one with bigger dimensions -- and assign the click handler to those only. If the onclick is set to both the A tag and the LI (through whatever means), the call may happen twice, unless you specifically prevent such event bubbling in your named function.
最好的办法可能是选择一种特定的元素类型——也许是尺寸更大的元素类型——然后只为这些元素分配点击处理程序。如果 onclick 同时设置为 A 标记和 LI（通过任何方式），则调用可能会发生两次，除非您特别防止在命名函数中出现此类事件冒泡。
Is there a particular reason you want the same action to happen on both element types, instead of just one? (If it's something along the lines of "just a precaution," it's probably best to work out the issues instead of paving over them with more scripting.)
您是否有特殊原因希望在两种元素类型上发生相同的操作，而不仅仅是一种？（如果它类似于“只是预防措施”，那么最好解决这些问题，而不是用更多的脚本来解决它们。）
