jquery ui datepicker不使用动态html

Question

我已经成功地将jquery UI datePicker附加到一个动态创建的文本框中,当我选择一个不在相应文本框中的日期时,Al工作正常,但是它出现在我的第一个不动态创建的文本框中.我的代码是这样的

 $(".add-more").click(function () {
        $this = $(this);
        $section = $($("." + $this.attr("data-section"))[0]).html();// This is a section in my HTML with multiple textboxes
        $this.parent().append('<div class=' + $this.attr("data-section") + '>' + $section + '</div>').fadeIn(); 

        $(".datepicker").removeClass('hasDatepicker').datepicker();

    });

HTML

<div id="Div1" class="section-container">
    <div class="education-item" style="display: none">
        <p>Institute:<input type="text" name="txtInstitute"   /></p>
        <p>Start Year:<input type="text" name="txtStartYear" class="datepicker" /></p>
        <p>End Year:<input type="text" name="txtEndYear"  class="datepicker"/></p>
    </div>
</div>

JSFiddle在这里

Answer 1

尝试使用更准确的元素指示来创建datepicker.喜欢这里http://jsfiddle.net/xUYM2/

$(".add-more").click(function() {
    $this = $(this);
    $section = $($("." + $this.attr("data-section"))[0]).html();
    var block = $('<div class=' + $this.attr("data-section") + '>' + $section + '</div>')
    $this.parent().append(block).fadeIn();

    block.find(".datepicker").removeClass('hasDatepicker').datepicker();
    showHideRemove($(this).parents(".section-container").find(".remove-item"), 1);
});

PS>在你的脚本中使用局部变量会更好

    var $this = $(this); // without var keyword your variable will be global
    var $section = $($("." + $this.attr("data-section"))[0]).html();