Question

我有以下代码，但不起作用。每当复选框状态更改（选中/取消选中）时，都应该将.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>

Answer 1

这里的问题是

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

在domready之前运行。

尝试用

替换它

$(function() { ... });

或

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

jsfiddles说明了这个问题：

工作，domReady回调：http://jsfiddle.net/marionebl/B5z24/1/
失败：http://jsfiddle.net/marionebl/B5z24/2/

Answer 2

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

听取复选框的变化

2 个答案: