無法將日期選擇器綁定到jquery中動態添加的文本框中

Question

我有一個DIV，它將根據我選擇的依賴項動態添加。

var dependentCount = 0; 
    var index = 0; 
    $("body").on("click", "#add", function() { 
     var count = ++index; 
     var html = $("#add_dependent_template").html();  
     html = html.replace(/name=\"dependent-dob\"/g, "name=\"dependent-dob" + count + "\""); 
     var $new = $("#dependents").append("<div class= 'dependent-contents' id='dependent" + (count) + "' >" + html + "</div>"); 
     $(".dependent-contents:last-child .divcount").append(count);   
     $("#dependent-dob").datepicker(); 
     dependentCount++; 
     $("#dependent-count").val(dependentCount); 
    }); 

其中我試圖將datepicker綁定到div內動態添加的文本框。

<div class="editor-field" id="dependent-details"> 
    <div>..... 
     ..... 
    </div> 
    <div>  
     <input type="text" id="dependent-dob" name="dependent-dob" 
      class="dependent-datepciker" datepicker /> 
    </div> 
</div> 

但我沒有得到datepicker，我已經嘗試過像下面。

$("#dependent-dob").datepicker(); 
//$("#<%= dependent-dob.ClientID %>").datepicker(); 

    $("#dependent-details").delegate(".dependent-datepciker", "focusin", function() { 
     $(this).datepicker(); 

    }); 
//$('body').on('focus',".dependent-dob", function(){ 
// $(this).datepicker(); 
// alert("hi"); 
//});​ 

身體能幫助我嗎？

Answer 1

試試這個

$("#dependent-details").on("focusin",".dependent-datepciker", function() { 
     $(this).datepicker(); 
}); 

Answer 2

嘗試以下操作：

var $input = $("<input/>").datepicker(); 
$("#dependant").append($input); 

工作小提琴這裏：http://jsfiddle.net/a9zQG/

我希望它能幫助。

Answer 3

如果您使用jQuery 1.7或更高版本，delegate()已被on()Reference

取代你應該在事件未動態加載的div的父元素進行綁定，然後使用一個選擇器來過濾元素例如

$("#dependent-details").on("focusin", ".dependent-datepciker", function() { 
    $(this).datepicker(); 
});