的HTML list 为,
<ul id="slider">
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class="selected"></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
<ul>
我将选择的类添加到任何li元素中。
在这里,我向第四个li元素添加了class =“selected”。
当将选定的类添加到任何li元素中时,要执行一些代码。
尝试了这个,但是没有按预期工作。
<script>
$(function() {
$('#slider').bind('DOMSubtreeModified', function(e) {
alert("Changed");
});
});
</script>
最佳答案
最好的方法就是在添加类时调用函数,因为这是添加代码的代码。
有两种常见的方法可以做到这一点:
li.addClass("selected");
doSomethingBecauseItChanged(li);
li
元素上引发自己的事件来做到这一点,这可以更彻底地将添加类的代码与响应更改的代码分离。这是监听事件的代码:
$("#slider").on("added-class", function() {
alert("Changed");
});
这是添加类并引发事件的代码:
li.addClass("selected").trigger("added-class");
请注意,
added-class
是我创建的名称,而不是已经存在的名称。使用您喜欢的任何名称,只需确保不与现有事件类型冲突即可。这是一个完整的示例:Live Copy | Live Source
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Event Example</title>
<style>
li.selected {
color: green;
}
</style>
</head>
<body>
<p>In two seconds, the third item will turn green and you'll see an alert.</p>
<ul id="slider">
<li class="">xxxxx</li>
<li class="">xxxxx</li>
<li class="">xxxxx</li>
<li class="">xxxxx</li>
<li class="">xxxxx</li>
<li class="">xxxxx</li>
<li class="">xxxxx</li>
</ul>
<script>
$("#slider").on("added-class", function() {
alert("Changed");
});
setTimeout(function() {
$("#slider li").eq(2).addClass("selected").trigger("added-class");
}, 2000);
</script>
</body>
</html>
或者,如果不需要IE支持,则可以使用mutation observer(support matrix),但是坦率地说,如果您控制添加类的代码,则实际上不需要使用那些。