首页 > 代码库 > javascript对行单击事件处理（委托事件）
javascript对行单击事件处理（委托事件）
我们有时候需要对一行数据做一个单击事件，即点击行中的任意位置都能触发该事件，我遇到的问题是在一个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="http://www.mamicode.com/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=http://www.mamicode.com/‘../img/down.png‘ />"1002"><span >def</span> <span>行点击测试</span> <span>第二行</span> <span><img name="arrow-icon" alt=‘展开‘ src=http://www.mamicode.com/‘../img/down.png‘ />"1003"><span >sdf</span> <span>行测试</span> <span>第三行</span> <span><img name="arrow-icon" alt=‘展开‘ src=http://www.mamicode.com/‘../img/down.png‘ />"1004"><span >wewq</span> <span>行点击测试</span> <span>第四行</span> <span><img name="arrow-icon" alt=‘展开‘ src=http://www.mamicode.com/‘../img/down.png‘ />"1005"><span >gax</span> <span>行测试</span> <span>第五行</span> <span><img name="arrow-icon" alt=‘展开‘ src=http://www.mamicode.com/‘../img/down.png‘ />>javascript对行单击事件处理（委托事件）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。