行動的jQuery與輸入創建

Question

HTML

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

jQuery的我做成輸入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"); 
     } 

}); 
}); 

輸入 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(); 
    } 



}); 
}); 

行動

問題

爲什麼動作不適輸入？

Answer 1

更改您綁定運行時的輸入。

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

變化

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

現在寫您的更改事件如下

$(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"); 
     } 

}); 

希望這將是對你有幫助。

Answer 2

將更改事件委託給#hebergement，因爲在頁面加載後添加了#nbchambre。

$('#hebergement').on('change', 'input[name=nbchambre]', function(){ 
    ... 
    ... 
}); 

信息：Understanding Event Delegation

邊注：不要重複相同ID的多個元素（id="nbchambre"）