标签：行单击事件（事件委托）
我们有时候需要对一行数据做一个单击事件，即点击行中的任意位置都能触发该事件，我遇到的问题是在一个ul标签中的li标签中，当点击行中的任何一个位置时都让有反应进行不同的显示，我这里做了个demo，如果有更好的方法请分享一下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行单击事件</title>
<style type="text/css">
span {
background-color:green;
width:120px;
}
</style>
<script type="text/javascript" src="../html/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("#lineTest").on("click", "li", function(){
if($(this).closest("li").find("img[name=‘arrow-icon‘]").attr(‘src‘).indexOf("up.png") == -1) {
$(this).closest("li").find("img[name=‘arrow-icon‘]").attr("src", "../img/up.png");
$(this).closest("li").find("span:last").append("<div>" + $(this).html() + $(this).attr("id")+ "</div>");
} else {
$(this).closest("li").find("img[name=arrow-icon]").attr("src", "../img/down.png");
$(this).closest("li").find("div").remove();
}
});
});
</script>
</head>
<body>
<ul id="lineTest">
<li id="1001"><span >abc</span> <span>行测试</span> <span>首行</span> <span><img name="arrow-icon" alt=‘展开‘ src=‘../img/down.png‘ /></span></li>
<li id="1002"><span >def</span> <span>行点击测试</span> <span>第二行</span> <span><img name="arrow-icon" alt=‘展开‘ src=‘../img/down.png‘ /></span></li>
<li id="1003"><span >sdf</span> <span>行测试</span> <span>第三行</span> <span><img name="arrow-icon" alt=‘展开‘ src=‘../img/down.png‘ /></span></li>
<li id="1004"><span >wewq</span> <span>行点击测试</span> <span>第四行</span> <span><img name="arrow-icon" alt=‘展开‘ src=‘../img/down.png‘ /></span></li>
<li id="1005"><span >gax</span> <span>行测试</span> <span>第五行</span> <span><img name="arrow-icon" alt=‘展开‘ src=‘../img/down.png‘ /></span></li>
</ul>
</body>
</html>标签：行单击事件（事件委托）
原文地址：http://fan0128.blog.51cto.com/6164271/1554556
