Jquery problem with checkbox (dynamically) check selector

Question

I have a problem with jQuery. I have an html page with a form.

In my form I have a select:

<select class="form-control" id="macro_area" name="macro_area">
  <option value="0">Select type</option>
  <option value="1">test</option>
  <option value="7">Other</option>
</select>

When I select an option, I load a php file with this jQuery function:

$('document').ready(function() {
    $('#macro_area').on('change', function() {
        request = $.ajax({
             type: "POST",
             url: "get_bus_act_subcat.php",
             data: { id_macro_area: id_macro_area },
             dataType: "html"
        });   

        request.done(function(response) { 
            $(".act_subcat").html (response);
        });
});

The procedure works correctly and adds html code (generated from the file get_bus_act_subcat.php) to the page, in a div (<div class="form-group act_subcat">) originally empty.

Code generated and inserted in page is similar to this:

<div class="form-check">
  <div class="container">
    <div class="row">
      <div class="col-sm-3">
        <input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_5" value="5">Test1
      </div>
      <div class="col-sm-3">
        <input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_6" value="6">Test2
      </div>
      <div class="col-sm-3">
        <input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_2" value="2">Test3
     </div>
   ......     
    </div>
  </div>
</div>

So the final result is:

<div class="form-group act_subcat"> //this div is present on page when load
<div class="form-check">
  <div class="container">
    <div class="row">
      <div class="col-sm-3">
        <input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_5" value="5">Test1
      </div>
      <div class="col-sm-3">
        <input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_6" value="6">Test2
      </div>
      <div class="col-sm-3">
        <input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_2" value="2">Test3
     </div>
   ......     
    </div>
  </div>
</div>
</div>

Now I have my problem... I want to check with jQuery if any of the checkboxes have been checked but standard solution/selector not function.

I think because the checkbox fields have been added later.

Any ideas or suggestions?

Thanks

Do you want to know when they're ticked? Or just if they are ticked? ie what event are you within when you attempt the check? The checkbox click/change or a separate (eg button) click handler? If it's "if any have been checked" then please include your `selector` - that should be fine. If it's "when they are checked" then please include your event handler - it probably needs to be converted to *event delegation* (see https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Sep 03 '20 at 16:05
Your question is not clear But i assume that you check checkboxes with jquery after loading html via Ajax and you are not able to get value via Jquery is that correct? — Subhash Shipu, Sep 03 '20 at 16:07
Where is the code that you've tried that does not work? What error do you get? What, exactly, do you need help with? — PeterKA, Sep 03 '20 at 16:07
"I want to check with jquery if any of the checkboxes have been checked" What are you doing adding an event listener? — epascarello, Sep 03 '20 at 16:16
https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — epascarello, Sep 03 '20 at 16:16

score 3 · Accepted Answer · answered Sep 03 '20 at 16:34

Maybe the following is helpful to you?

$('.act_subcat').on('change','input',
  function(ev){console.log(this.id+" was clicked and is"+(this.checked?"":" not")+" checked");}
)
$('document').ready(function(){
 $('#macro_area').on('change', function(){
   $(".act_subcat").html(insertHTML(this.value));
 });
});

// substitute for AJAX:
function insertHTML(i){return `<div class="form-check">
  <div class="container">
    <div class="row">
      <div class="col-sm-3">
        <input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_${i}" value="5">Test${i++}
      </div>
      <div class="col-sm-3">
        <input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_${i}" value="6">Test${i++}
      </div>
      <div class="col-sm-3">
        <input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_${i}" value="2">Test${i}
     </div> 
    </div>
  </div>
</div>`;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="macro_area" name="macro_area">
  <option value="0">Select type</option>
  <option value="1">test</option>
  <option value="7">Other</option>
</select>
<div class="act_subcat"></div>

I replaced your AJAX part with another HTML-importing function. I demonstrate the event binding with an .on relative to the .act_subcat container. The function inside will fire whenever an input element in this container changes. And this will work for any dynamically added content. Try it out.

` $('.act_subcat').on('change','input' ...` solved my problem. THANKS! — Frequent Flyer Italia, Sep 04 '20 at 08:55

score 0 · Answer 2 · answered Sep 03 '20 at 16:42

One approach you can take is to attach the event listener to the returned content prior to adding it to the page:

$(response).find(':checkbox').on('change', function() {
    console.log( `Checkbox with id: ${this.id} was clicked` );
});
//then ... append it ......html( response );

Jquery problem with checkbox (dynamically) check selector

2 Answers2