javascript - jquery ui datepicker not working with dynamic html - Stack Overflow

admin管理员组

文章数量:1030552

I have successfully attached jquery UI datePicker to a dynamically created textbox, Al works fine excepts when I select a date it is not ing in corresponding textbox, But it es in my first textbox which is not dynamically created. My code is like this

 $(".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 Here

I have successfully attached jquery UI datePicker to a dynamically created textbox, Al works fine excepts when I select a date it is not ing in corresponding textbox, But it es in my first textbox which is not dynamically created. My code is like this

 $(".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 Here

• javascript
• jquery
• html
• jquery-ui
• datepicker

Share Improve this question Follow asked Mar 15, 2014 at 10:48 NoneNone 5,6802323 gold badges9393 silver badges178178 bronze badges 2

• Try jsfiddle/xUYM2 ( i just use more accurate indication of elements to create datepicker ) – Vasiliy vvscode Vanchuk Commented Mar 15, 2014 at 11:33
• Ahhh..That work like a charm. You can add this as answer here :) – None Commented Mar 15, 2014 at 11:38

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Try to use more accurate indication of elements to create datepicker. Like here http://jsfiddle/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);
});

P.S> it will be better to use local variables in you script like

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

Add this line in the add-more function

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

I have successfully attached jquery UI datePicker to a dynamically created textbox, Al works fine excepts when I select a date it is not ing in corresponding textbox, But it es in my first textbox which is not dynamically created. My code is like this

 $(".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 Here

I have successfully attached jquery UI datePicker to a dynamically created textbox, Al works fine excepts when I select a date it is not ing in corresponding textbox, But it es in my first textbox which is not dynamically created. My code is like this

 $(".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 Here

• javascript
• jquery
• html
• jquery-ui
• datepicker

Share Improve this question Follow asked Mar 15, 2014 at 10:48 NoneNone 5,6802323 gold badges9393 silver badges178178 bronze badges 2

• Try jsfiddle/xUYM2 ( i just use more accurate indication of elements to create datepicker ) – Vasiliy vvscode Vanchuk Commented Mar 15, 2014 at 11:33
• Ahhh..That work like a charm. You can add this as answer here :) – None Commented Mar 15, 2014 at 11:38

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Try to use more accurate indication of elements to create datepicker. Like here http://jsfiddle/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);
});

P.S> it will be better to use local variables in you script like

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

Add this line in the add-more function

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

本文标签： javascriptjquery ui datepicker not working with dynamic htmlStack Overflow