听取复选框的变化

时间:2014-02-14 21:00:48

标签: jquery onchange

我有以下代码,但不起作用。每当复选框状态更改(选中/取消选中)时,都应该将.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">&nbsp;</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>

2 个答案:

答案 0 :(得分:0)

这里的问题是

(function() {
    $('[data-list-control]').change(...);
})();

domready之前运行。

尝试用

替换它
$(function() { ... });

$(document).ready(function(){ ... })

jsfiddles说明了这个问题:

答案 1 :(得分:0)

问题是我在我的三个列表中的两个中的html中的属性周围键入了括号。这:<ul [data-list-control]>而不是:<ul data-list-control>。只是一个愚蠢的错字:(