Grails和Jquery Datepicker

Question

我想编写一个代码，使我能够创建输入，如主题，购买日期和资产价值，输入框具有属性'class =“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>   

Answer 1

由于输入动态添加到DOM中，你需要添加到DOM后的元素初始化日期选择器。

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

Answer 2

因为新元素没有绑定.datepicker()。而不是

：

$('.datepicker').datepicker({ 
     language: 'it' 
}); 

使用：

$('body').on('focus',".datepicker", function(){ 
    $(this).datepicker({ 
     language: 'it' 
    }); 
});