JQuery element not selecting

Question

I have the below function that runs when the page loads, but doesn't run when a checkbox is selected. Can anyone tell why?

My JS

function filterFilesList() {
    alert('filter');    
}

$("#filterControls :checkbox").click(filterFilesList);
filterFilesList();

HTML

<div id="filterControls"><ul><h4>Business Divisions</h4><li><label><input type="checkbox" value="SMB"><span></span>SMB</label></li><li><label><input type="checkbox" value="DCS"><span></span>DCS</label></li><li><label><input type="checkbox" value="DPS"><span></span>DPS</label></li>
    </ul>
</div>

I have tried $("#filterControls ul li :checkbox") also but that doesn't work

******************EDIT*****************

Turns out this code works fine alone but there is something else in my code stopping it from working properly. I'm assuming the fact that the checkboxes are added dynamically could be causing the problem but thats another issue I suppose. Thanks for you help anyway.

Have you wrapped the code in `document-ready` handler? And Your HTML is invalid, it should be `ul > li > label >` — Satpal, Oct 07 '16 at 08:20
Also your HTML is invalid. Only `li` elements should be children of the `ul`. — Rory McCrossan, Oct 07 '16 at 08:23
what about `$("#filterControls ul li input[type=checkbox]")` ? — ValLeNain, Oct 07 '16 at 08:23
Sorry, I had copied the HTML in wrong. I have amended above. Still doesnt work. and yes it is in document ready — LeeTee, Oct 07 '16 at 08:34
works fine: https://jsfiddle.net/5xkgbjnq/1 (typo in the $()) copied your (edited) html and js into fiddle.js. So you're either not including jquery, not putting in $() (which you say you are) or there's some other issue not included in the question (mutliple #filterControls?) — freedomn-m, Oct 07 '16 at 08:38
@LeeTee If that is true, then your code is working fine and there is no point of having this question. — Rajesh, Oct 07 '16 at 08:45
Its not working in the app. Could it be because the checkboxes are added dynamically? hmmmm... — LeeTee, Oct 07 '16 at 08:48
I'm voting to close this question as off-topic because there is nothing wrong with the code, the issue lied somewhere else in the app. — LeeTee, Oct 07 '16 at 08:52
**" the fact that the checkboxes are added dynamically "** - you really should have lead with this information! (or at least included it) http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements (should be close-duplicate, but I already voted close-not-enough-detail) — freedomn-m, Oct 07 '16 at 08:58
Didn't cross my mind at the time, that that had anything to do with it! Otherwise I would have mentioned it. — LeeTee, Oct 07 '16 at 09:00
@LeeTee no worries, if it was something you had considered, you might have found the answer yourself - it's easy to overlook something that someone else might see quickly. It's always worth trying to reproduce the problem yourself (eg in jsfiddle) and in the verifiable part of [mcve] — freedomn-m, Oct 07 '16 at 09:04

score 4 · Answer 1 · answered Oct 07 '16 at 08:26

DEMO Attached: Please check

$(document).ready(function(){
  

$("#filterControls :checkbox").click(filterFilesList);
filterFilesList();
});

 function filterFilesList() {
    alert('filter');    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="filterControls">
    <ul>
        <h4>Business Divisions</h4>
        <label>
            <li>
                <input type="checkbox" value="SMB">
                <span></span> SMB
            </li>
        </label>
        <label>
            <li>
                <input type="checkbox" value="DCS">
                <span></span> DCS
            </li>
        </label>
        <label>
            <li>
                <input type="checkbox" value="DPS">
                <span></span> DPS
            </li>
    </ul>
</div>

Strange that it works here but not in my code! Must be something else causing it — LeeTee, Oct 07 '16 at 08:43

Lidaranis · Answer 2 · 2016-10-07T08:45:27.393

3

function filterFilesList() {
        alert('filter');    
    }

$(document).ready(function(){
    $("#filterControls :checkbox").click(filterFilesList);
});

This is working but damn.. that html...

[EDIT]

I attempted to stay as close to your original code as possible. Have a look at this. See if this works for you.

https://jsfiddle.net/ttL11k8n/

edited Oct 07 '16 at 08:45

answered Oct 07 '16 at 08:24

Lidaranis

765
3
9

I have amended the HTML to the above, but still it doesnt work – LeeTee Oct 07 '16 at 08:35
Yes it works, I realise now, the issue lies with the fact the checkboxes are added dynamically, nothing to do with this code. thanks for your help. – LeeTee Oct 07 '16 at 08:58

JQuery element not selecting

2 Answers2