在动态可扩展列表中标记单击的项目
Mark clicked item in dynamical extensible list
我想在列表中标记一个单击的项目。这很好(test1-test5),但如果我通过JQuery的append向该列表中添加更多的项(例如test6),则只添加加载页面时存在的test1-test五,"使用"突出显示css功能。我该怎么解决这个问题?
$("#tracklist li").on("click", function() {
$('.highlight').removeClass('highlight');
$(this).addClass('highlight');
});
$("#test").click(function() {
$("#tracklist").append("<li class='list_style_tracklist_lastitem ui-sortable-handle'><a href='#'>test6</a></li>");
}
ol {
list-style-type: none;
margin: 0;
padding: 0;
height: 120px;
width: 450px;
overflow-y: auto;
overflow-x: hidden;
background: #e6e6e6;
}
li {
font: 200 15px/1.5 Helvetica, Verdana, sans-serif;
border-bottom: 1px solid #ccc;
border: 1px solid #d3d3d3;
background: #e6e6e6;
font-weight: normal;
padding: 0em 0em 0em 1.5em;
text-indent: 0.1em;
list-style: none;
background-repeat: no-repeat;
}
.list_style_tracklist_music {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAQAAABKIxwrAAAAvElEQVR4AWMgDygz2DLYoEOgmDYDMzblEQxzGGZhgRMZHBiYsCufiQmBGibBNRBWjtBAUDnzLEaEBnMCyllnNR3QWMwwA8QGykUSUM4xe90lixVw5RHDVfkMxplcxCoXmJO7c9OVQ3euPjNdTlA595xVF3/9+Q8ELz7qLCGkfIb64ifvQYo/fus7yjILKILfdJZZ8Vvmnek/6rGGFayYsFdnAOF0sDMIK0dAKiufhQuClRPOq4g8C5QnBwAAiy7V4BTvo9kAAAAASUVORK5CYII=');
}
ol li.list_style_tracklist_music a,
ol li.list_style_tracklist_video a,
ol li.list_style_tracklist_lastitem a {
text-decoration: none;
color: #000;
/*-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;*/
-webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
-moz-transition: font-size 0.3s ease, background-color 0.3s ease;
-o-transition: font-size 0.3s ease, background-color 0.3s ease;
-ms-transition: font-size 0.3s ease, background-color 0.3s ease;
transition: font-size 0.3s ease, background-color 0.3s ease;
display: block;
width: 450px;
}
ol li.list_style_tracklist_music a:hover,
ol li.list_style_tracklist_video a:hover,
ol li.list_style_tracklist_lastitem a:hover {
/*font-size: 18px;*/
background: #ffbb99;
}
.highlight {
background-color: #ffbb99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ol id="tracklist">
<li class="list_style_tracklist_music">
<a href="#">test1</a>
</li>
<li class="list_style_tracklist_music">
<a href="#">test2</a>
</li>
<li class="list_style_tracklist_music">
<a href="#">test3</a>
</li>
<li class="list_style_tracklist_music">
<a href="#">test4</a>
</li>
<li class="list_style_tracklist_music">
<a href="#">test5</a>
</li>
</ol>
<input type="button" name="test" value="test" id="test" />
首先将函数绑定到现有的<li>
s。
然后创建一个新的<li>
(test6),它显然没有绑定!
这里更简单的是将绑定委托给父<ol>
,这样它的任何子级都会在它存在时立即参与:
$("#tracklist ol").on("click", function(e) {
$('.highlight').removeClass('highlight');
$(e.target).addClass('highlight');
});
相关文章:
- Dojo:访问dijit.form.Select中单击的项目
- 角度的项目列表 ng 重复,ng 单击显示全宽描述
- 将单击事件添加到附加的项目中
- 设置单击项目符号导航后不起作用的间隔
- 选择了多个用javascript单击的项目
- 获取中继器控件ASP.Net中显示的单击项目文本框
- 正在删除正在单击的项目
- 单击Oracle APEX导航栏项目时的条件操作
- 如何只调用一次事件处理程序,而不是每次单击项目时调用事件处理程序
- 单击项目以更改另一个项目的背景图像
- 如何在单击项目时隐藏菜单,或在有人单击离开时隐藏菜单
- 单击项目时更改鼠标悬停=“this.src='xxx'”
- 如何让我在我的画廊中针对 setInterval 单击项目符号
- JavaScript 获取单击项目到文本框 Asp.Net
- 如何从外部json文件中获取id数据,并在url中显示id号,当使用jQuery单击项目时
- 通过单击项目名称显示任务列表
- 使用jQuery显示单击项目的标题值
- 动态创建的getmdl选择字段's的下拉窗口没有'单击项目时不要关闭
- jQuery 在单击项目时向下滚动
- 如何在asp.net中使用javascript显示与所单击项目相关的信息