我有以下代码,但不起作用。每当复选框状态更改(选中/取消选中)时,都应该将.selected
类添加到祖先<li>
。但没有任何反应。没有错误,但也没有添加/删除类。
JavaScript(list-control.js)
(function() {
$('[data-list-control]').on('change', 'input[type="checkbox"]', function() {
$(this).closest('li').toggleClass('selected');
console.log('change event fired');
});
})();
HTML
<body>
...
<ul data-list-control>
<li>
<div class="list-control_left">
<input type="checkbox" id="Item30" tabindex="402">
<label for="Item30"></label>
</div><!-- .list-control_left -->
<div class="list-control_main">
<div class="list-control_title">
<span class="icon-incoming-calls left medium"> </span>
Caller Name
</div>
<div class="list-control_subtitle">The Subject Line</div>
</div><!-- .list-control_main -->
<div class="list-control_right">
<div class="list-control_right-top">
</div>
<div class="list-control_right-bottom">
00:00 p
</div>
</div><!-- .list-control_main -->
</li>
</ul>
...
<script src="js/libs/jquery.js"></script>
<script src="js/widgets/off-canvas.js"></script>
<script src="js/widgets/drop-list.js"></script>
<script src="js/widgets/list-control.js"></script>
</body>
答案 0 :(得分:0)
这里的问题是
(function() {
$('[data-list-control]').change(...);
})();
在domready
之前运行。
尝试用
替换它$(function() { ... });
或
$(document).ready(function(){ ... })
jsfiddles说明了这个问题:
答案 1 :(得分:0)
问题是我在我的三个列表中的两个中的html中的属性周围键入了括号。这:<ul [data-list-control]>
而不是:<ul data-list-control>
。只是一个愚蠢的错字:(