无法将datepicker绑定到jquery中动态添加的文本框

时间:2013-08-05 09:11:59

标签: jquery asp.net-mvc-4 razor

我有一个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");
 //});​

任何人都能帮助我吗?

3 个答案:

答案 0 :(得分:1)

尝试以下:

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

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

我希望它有所帮助。

答案 1 :(得分:0)

试试这个

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

答案 2 :(得分:0)

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

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

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