CODEWITHSUNDEEP
htmljquery
Frequent Flyer Italia
Frequent Flyer Italia

Reputation: 3

Jquery problem with checkbox (dynamically) check selector

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

Upvotes: 0

Views: 49

Answers (2)

PeterKA
PeterKA

Reputation: 24638

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 );

Upvotes: 0

Carsten Massmann
Carsten Massmann

Reputation: 28196

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.

Upvotes: 3

Related Questions