使用输入创建的输入的动作jquery

Question

HTML

<input class="form-check-input" type="checkbox" id="hotels" value=""> HOTELS
<div id="hebergement"></div>     

jQuery I make input id ="nbchambre"

$(document).ready(function (){
$('#hotels').on('change', function() {
    if ($('#hotels').is(":checked"))
        {
                var hotels = $('#hotels:checked').val()
                //alert( hotels ); // or $(this).val()
                $('#hebergement div').empty();

                var  i,ch='';
                for(i=0;i<<?php echo $ln; ?>;i++) {
                ch += "<option value='"+ arrayregime[i] +"'>"+arrayregime[i]+"</option>";
                }

                //alert(test);
                var newTextBoxDiv = $(document.createElement('div'))
                .attr("id", 'divhotel');
                newTextBoxDiv.after().html('<hr/><center>  <h4 style="color: #3385c0;"> VOTRE DESTINATION</h4></center>' + 
                ' <div class="row"> <div class="col-md-3"> '+
                       ' <label>Date depart</label> '+
                        '<div class="input-group">'+
                            '<div class="input-group-addon">'+
                               ' <i class="fa fa-calendar"></i> '+
                            '</div> <input class="form-control" name="datedepart" id="datedepart" placeholder="MM/DD/YYYY" type="date" >'+
                       ' </div>'+
                ' </div>'+
                ' <div class="col-md-3"> '+
                       ' <label>Date retour</label> '+
                        '<div class="input-group">'+
                            '<div class="input-group-addon">'+
                               ' <i class="fa fa-calendar"></i> '+
                            '</div> <input class="form-control" name="dateretour" id="dateretour" placeholder="MM/DD/YYYY" type="date" >'+
                       ' </div>'+
                ' </div> </div>'+
                '<div class="form-group row" ><label  class="col-xs-2 col-form-label">Categorie hotels</label> <div class="col-xs-2"><select name="categ" class="form-control"><option value="0">0 *</option>       <option value="1">1 *</option>  <option value="2">2 *</option>      <option value="3">3 *</option>      <option value="4">4 *</option>      <option value="5">5 *</option>  </select> </div>    '+
                '<label  class="col-xs-2 col-form-label">Pention hotels</label> <div class="col-xs-2"><select name="categ" class="form-control"> '+ch+' </select> </div></div>  '+
                '<input class="form-control" type="number" name="nbchambre" id="nbchambre" value="0" /><div id="typechambre"> </div>'+
                ' ');

                newTextBoxDiv.appendTo("#hebergement");

    }

    else{
        $('#hebergement div').empty();
    }



}); 
});

Action with input nbchambre

<script type="text/javascript">
$(document).ready(function (){
$('#nbchambre').on('change', function() {
    //alert( this.value ); // or $(this).val()
    var test = parseInt($("#nbchambre").val(), 10);
    //alert(test);
    $('#typechambre div').empty();
    var  i,ch='';

    ch = "<option value='single'>Single</option><option value='double'>Double</option><option value='triple'>Triple</option><option value='quadruple'>Quadruple</option><option value='appartement'>Appartement</option>";

    for(i=1;i<=test;i++) {

    //$( "#TextBoxesGroup" ).remove();
    var newTextBoxDiv = $(document.createElement('div'))
            .attr("id", 'chambre' + i);

            newTextBoxDiv.after().html('<label  class="col-xs-2 col-form-label">Chambre '+ i + ' : </label> <div class="col-xs-1">' + 

           '<select class="form-control" name="enfants[]" >'+ch+'</select>' );

            newTextBoxDiv.appendTo("#typechambre");
        }

});
});

Question

Why does the action not apply the input?

Answer 1

Change in your input which you are binding run time.

<input class="form-control" type="number" name="nbchambre" id="nbchambre" value="0" />

change to

<input class="form-control nbchambre" type="number" name="nbchambre" id="nbchambre" value="0" />

Now write your change event as follow

$(document).on('change', '.nbchambre', function() {
    //alert( this.value ); // or $(this).val()
    var test = parseInt($("#nbchambre").val(), 10);
    //alert(test);
    $('#typechambre div').empty();
    var  i,ch='';

    ch = "<option value='single'>Single</option><option value='double'>Double</option><option value='triple'>Triple</option><option value='quadruple'>Quadruple</option><option value='appartement'>Appartement</option>";

    for(i=1;i<=test;i++) {

    //$( "#TextBoxesGroup" ).remove();
    var newTextBoxDiv = $(document.createElement('div'))
            .attr("id", 'chambre' + i);

            newTextBoxDiv.after().html('<label  class="col-xs-2 col-form-label">Chambre '+ i + ' : </label> <div class="col-xs-1">' + 

           '<select class="form-control" name="enfants[]" >'+ch+'</select>' );

            newTextBoxDiv.appendTo("#typechambre");
        }

});

Hope it will be helpful for you.