JQuery selecting input:checkbox down the line cant get it to work

Question

I am making a search function as an assignment. I however cant seem to trigger a change event I made with jQuery. The HTML structure is built by the same script with this in the bottom.

$('.receptenFilter input:checkbox').on('change', function(e) {
  console.log('changed')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="receptenFilter">
  <div class="ingredienten">
    <ul id="ingredientenHolder">
      <li><input type="checkbox" name="ingredientFilter" value="Gevogelte"></li>
    </ul>
  </div>
  <div class="gerei">
    <ul id="gereiHolder">
      <li><input type="checkbox" name="gereiFilter" value="186"><img src="../../images/icons/32px/186.png" alt=""></li>
    </ul>
  </div>
</div>

This does not seem to trigger the console.log. Should I select each thing down the line? div div ul li input? I was under the impression it searched down the line.

Can someone help?

Even changed the input's to all have class="checkbox" in them. And changed the Jquery request to $('.checkbox input:checkbox').on('change', function(e){ console.log("selected") }); Still nothing when i check them on or off. — Pim, Nov 22 '22 at 10:47
Have you tried to run `console.log($('.receptenFilter input:checkbox').length)` in the line before you attempt to bind event-handlers? What result does it give? — David Thomas, Nov 22 '22 at 10:51
I created a snippet from your code in the question. You can see it works fine. This means that you've not set up the page correctly in your local version. Possibly you've not included jQuery.js in the page, or are trying to execute the JS before the DOM loads. I would suggest you open the browser dev tools and check the console for errors on your page. That should hopefully give you an error you can debug. — Rory McCrossan, Nov 22 '22 at 10:57
i have it all running within $(document).ready(function(){}); The console.log line returns 0.. So i have 0 inputs but somehow they are created in a part of the script that ran before in a getJSon query and multiple for each loops within that function that executed before. Cant seem to run it properly and have no clue what i am doing wrong. — Pim, Nov 22 '22 at 11:06
If it's dynamically created check out this question: https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — cloned, Nov 22 '22 at 11:08
`i have 0 inputs but somehow they are created in a part of the script that ran before in a getJSon query` this is the most important detail which your question was missing - as the elements are dynamically created you need to use a delegated event handler. See @cloned's link above for the solution. — Rory McCrossan, Nov 22 '22 at 12:31
Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — cloned, Nov 22 '22 at 12:43

score -1 · Accepted Answer · answered Nov 22 '22 at 12:30

Your code is working fine. You need to do one change in your code.

I have shared the working code below.

<div class="receptenFilter">
  <div class="ingredienten">
    <ul id="ingredientenHolder">
      <li><input type="checkbox" name="ingredientFilter" value="Gevogelte"></li>
    </ul>
  </div>
  <div class="gerei">
    <ul id="gereiHolder">
      <li><input type="checkbox" name="gereiFilter" value="186"><img src="../../images/icons/32px/186.png" alt=""></li>
    </ul>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
    $('.receptenFilter input:checkbox').on('change', function(e) {
      console.log('changed')
    });
</script>

JQuery selecting input:checkbox down the line cant get it to work

1 Answers1