gpt4 book ai didi

javascript - 在动态可扩展列表中标记单击的元素

转载 作者:太空宇宙 更新时间:2023-11-04 11:01:46 24 4
gpt4 key购买 nike

我想在我的列表中标记一个被点击的元素。这工作正常(test1 - test5) - 但如果我通过 JQuery 的追加向该列表添加更多元素(例如 test6),则只有加载页面时存在的 test1-test5,“使用”突出显示的 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" />

最佳答案

首先您将函数绑定(bind)到现有的 <li> s.
然后您创建一个新的<li> (test6),显然没有绑定(bind)!

这里更简单的是将绑定(bind)委托(delegate)给父级<ol> , 所以它的任何 child 一旦存在就会参与进来:

$("#tracklist ol").on("click", function(e) {
$('.highlight').removeClass('highlight');
$(e.target).addClass('highlight');
});

关于javascript - 在动态可扩展列表中标记单击的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34241787/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com