jquery - 无法将日期选择器绑定到 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>

但我没有得到我尝试过的日期选择器，如下所示。

$("#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

尝试以下：

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

在这里工作小提琴：http: //jsfiddle.net/a9zQG/

我希望它有帮助。

Answer 2

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

您应该将事件绑定到未动态加载的 div 的父元素，并使用选择器过滤元素，例如

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

Answer 3

尝试这个

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