jQuery .change() method does not work for dynamically created check-box

Question

I have to create a cascade of elements dynamically.

<label class="control-label col-sm-2 text-primary" for="prix">Prix:</label>      
<div class="col-sm-10"> 
    <select  name="prix" id="prix">
        <option value="0">Type de prix</option>
        <option value="1">Gratuit</option>
        <option value="2">Montant</option>
        <option value="3">Echange</option>
        <option value="4">Prix à discuter</option>
        <option value="5">Prix n'est pas d'application</option>
    </select>
</div>
<div id="select_prix" ></div>
<div id="select_offre" ></div>

When I choose option value="2", a checkbox have to be inserted into div id="select_prix"

So I use jquery:

$('#prix').on('change', function() {
    if ($(this).val() < 2) {
        $("#select_prix").empty();
    }  

    var stroffre  ='<label class="col-sm-2 control-label text-primary">Offre ?                                  </label>';
    stroffre +='<div class="checkbox col-sm-10">';
    stroffre +='<label class="checkbox-custom" data-initialize="checkbox">';
    stroffre +='<input class="sr-only" id="chkoffre" type="checkbox" value="">';
    stroffre +='<span class="checkbox-label">Autoriser les  offres</span>';
    stroffre +='</label> </div>';

    if ($(this).val() == 2) {
        $("#select_prix").append(stroffre);
    }
});

Ok. The checkbox appears and what I get is:

checkbox ' Autoriser les offres'

Now, when I select checkbox , I want to insert a new line input into div id="select_offre"

I made for that a new jQuery code:

$("#chkoffre").change(function () {
    alert( 'CheckboxOffre' ); // or $(this).val()
    if($(this).is(":checked")) {

    }else{

    }
});

Unfortunately, I don't get the alert message.

You have to use [event delegation](http://api.jquery.com/on/). Take a look at [**this answer**](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Artur Filipiak, Mar 14 '15 at 17:52

score 1 · Answer 1 · answered Mar 14 '15 at 18:19

1

You can use jquery on for doing that:

$("#chkoffre").on("change", function(){
    alert( 'CheckboxOffre' ); // or $(this).val()
   if($(this).is(":checked")) {

   }else{

   }
});

This known as event delegation.

answered Mar 14 '15 at 18:19

hamed

7,361
12
44
95

Close, but not quite. Delegation is the correct method, but the code you provided is not a proper delegate. You need to provide a selector to an existing element for the delegate to bind to in the first part, then provide a more specific selector as the second argument in the .on method. See my answer below. – Brian Swift Mar 14 '15 at 18:31

score 1 · Answer 2 · answered Mar 14 '15 at 18:22

In order to listen for an event on an element that has been dynamically added to the DOM, you have to use a event delegate and not a directly bound event handler. As mentioned in the jQuery api documentation for .on, "Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on()". http://api.jquery.com/on/ This is true for .change and other direct bound event types.

So this:

$("#chkoffre").change(function () {

Must be changed to this:

$("#select_prix").on("change", "#chkoffre", function () {

Here's a fiddle that demonstrates this fix when applied to your code: https://jsfiddle.net/uuvcyf9o/ Here's the full code:

$('#prix').on('change', function() {
    if ($(this).val() < 2) {
        $("#select_prix").empty();
    }  

    var stroffre  ='<label class="col-sm-2 control-label text-primary">Offre ?</label>';
    stroffre +='<div class="checkbox col-sm-10">';
    stroffre +='<label class="checkbox-custom" data-initialize="checkbox">';
    stroffre +='<input class="sr-only" id="chkoffre" type="checkbox" value="">';
    stroffre +='<span class="checkbox-label">Autoriser les  offres</span>';
    stroffre +='</label></div>';

    if ($(this).val() == 2) {
        $("#select_prix").append(stroffre);
    }
});

$("#select_prix").on("change", "#chkoffre", function () {
    alert( 'CheckboxOffre' ); // or $(this).val()
    if($(this).is(":checked")) {
    }else{
    }
});

Many thanks for your answer – user2802283 Mar 15 '15 at 09:07 — user2802283, Mar 15 '15 at 09:07

jQuery .change() method does not work for dynamically created check-box

2 Answers2

Linked