操作 jQuery 使用输入创建的输入
action jquery with input created with input
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();
}
});
});
使用输入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");
}
});
});
问题
为什么操作不应用输入?
更改要绑定运行时的输入。
<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");
}
});
希望对您有所帮助。
将
更改事件委托给#hebergement
,因为#nbchambre
是在页面加载后添加的。
$('#hebergement').on('change', 'input[name=nbchambre]', function(){
...
...
});
信息:了解事件委派
旁注:不要为多个元素重复相同的 ID ( id="nbchambre"
(
相关文章:
- 如何使用JavaScript中的用户输入创建序列/序列
- 如何使用Javascript使用给定的输入创建输出表
- JavaScript可以根据用户输入创建一个新函数
- JQuery 从所有输入创建数组并提取它
- 主干更新输入创建新行
- 从表单输入创建多维关联数组
- 从用户输入创建日期对象
- 使用表单输入创建 PDF 文档
- 如何根据 laravel 中的用户输入创建动态字段
- 使用jQuery和一些输入创建一个键/对对象
- 从CSV输入创建Google图表
- 根据用户输入创建动态url
- 使用用户输入创建Javascript行
- 从多个输入创建数组
- 基于用户输入创建多个表单项
- 从循环JavaScript中的输入创建数组
- 如何从单个多选文件输入创建多个文件输入
- 根据输入创建X个空数组
- 操作 jQuery 使用输入创建的输入
- 根据用户输入创建变量n次