我想编写一个代码,允许我创建输入,例如主题、购买日期和 Assets 值(value),输入框具有属性“class =“datepicker””,起初一切正常读取,但是当我调用 works to append 以在页面内添加其他输入(与上面相同)时,“datepicker”不再显示任何生命迹象。 我给你看代码:
<div class="well bs-component" ><fieldset><div id="elencoBeni">
<div class="input-group">
<span class="input-group-addon">Oggetto</span>
<g:textField class="form-control" placeholder="Oggetto" name="oggetto" id="oggetto" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar" ></span></span>
<g:textField class="form-control datepicker" placeholder="Data acquisto" name="dataAcquisto" id="dataAcquisto" />
<span class="input-group-addon">Valore</span>
<g:textField class="form-control" placeholder="Valore" name="valoreBene" id="valoreBene"/><br/>
</div><br/>
</div>
<label class="btn btn-success" id="aggiungiOggetto" name="aggiungiOggetto" >+</label>
</fieldset></div>
jquery 函数:
<g:javascript>
$(document).ready(function(){
$('.datepicker').datepicker({
language: 'it'
}); var i = 0;
$("#aggiungiOggetto").click(function(){
$("#elencoBeni").append('<div class="input-group"><span class="input-group-addon">Oggetto</span><input type="text" class="form-control" placeholder="Oggetto" name="oggetto'+i+'" id="oggetto'+i+'"/><span class="input-group-addon"><span class="glyphicon glyphicon-calendar" ></span></span><input type="text" class="datepicker form-control" placeholder="Data acquisto" name="dataAcquisto'+i+'" id="dataAcquisto'+i+'"/><span class="input-group-addon">Valore</span><input type="text" class="form-control" placeholder="Valore" name="valoreBene'+i+'" id="valoreBene'+i+'"/><br/></div><br/>');
i++
}); </g:javascript>
最佳答案
由于input是动态添加到dom中的,添加到dom后需要为元素初始化datepicker。
$(document).ready(function() {
$('.datepicker').datepicker({
language: 'it'
});
var i = 0;
$("#aggiungiOggetto").click(function() {
$("#elencoBeni").append('<div class="input-group"><span class="input-group-addon">Oggetto</span><input type="text" class="form-control" placeholder="Oggetto" name="oggetto' + i + '" id="oggetto' + i + '"/><span class="input-group-addon"><span class="glyphicon glyphicon-calendar" ></span></span><input type="text" class="datepicker form-control" placeholder="Data acquisto" name="dataAcquisto' + i + '" id="dataAcquisto' + i + '"/><span class="input-group-addon">Valore</span><input type="text" class="form-control" placeholder="Valore" name="valoreBene' + i + '" id="valoreBene' + i + '"/><br/></div><br/>');
// initialize datepicker again, which includes the dynamically added element
$('.datepicker').datepicker({
language: 'it'
});
i++
});
});
关于javascript - Grails 和 Jquery 日期选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37239777/