我有一个项目清单
<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>
我希望能够将链接的onclick分配给li的onclick
到目前为止,我的尝试只需点击一下(因为我将脚本分配给onclick而不是执行脚本)
$('.list li').click(function() {
var launch = $('a.launch', this);
if (launch.size() > 0) { this.onclick = launch.attr('onclick'); }
});
提前谢谢蒂姆
建立在@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());
}
});
});
你这样做,所以整个li块是一个可点击的链接,而不仅仅是一个元素？如果是这样,您可以使用CSS轻松完成此操作.
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:
#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;
}
编辑:
通过这样做,您只需要将click事件附加到标记,如果您真的需要在用户点击它时执行一些javascript.