listening for checkbox change

StackOverflow https://stackoverflow.com/questions/21789432

  •  11-10-2022
  •  | 
  •  

Question

I have the following code, which does not work. It is supposed to add the .selected class to the ancestor <li> any time the checkbox state is changed (checked / unchecked). But nothing happens. No errors, but no adding/removing of the class either.

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>
Was it helpful?

Solution 2

The problem was that I had typed brackets around the attribute in the html in two of my three lists. This: <ul [data-list-control]> rather than this:<ul data-list-control>. Just a dumb typo :(

OTHER TIPS

The issue here is that 

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

Runs before domready.

Try replacing it with either

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

or 

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

jsfiddles illustrating the issue:

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top