jquery datepicker not working on dynamically created html

问题

I'm creating dynamically a couple of div with inner controls. Two of those controls should be datepickers. But for some reason they are not showing (only input text are shown) It works if I create static html, but not when I'm using dynamic one.

This is the code I'm using to generate the HTML (I can see the div)

var ShowContainerDiv = document.createElement('DIV');

var btnShowDiv = document.createElement('DIV');
btnShowDiv.id = 'btnShowDiv ';
btnShowDiv.title = 'Change';
btnShowDiv.index = 120;

var lblShow = document.createElement('label')
lblShow.htmlFor = "btnShowDiv";
lblShow.appendChild(document.createTextNode('Show'));
btnShowDiv.appendChild(lblShow );
btnShowDiv.onclick = function () {
    dropdown.style.visibility = "visible";
};

var dropdown = document.createElement('DIV');
dropdown.style.backgroundColor = 'white';
dropdown.style.borderStyle = 'solid';
dropdown.style.borderWidth = '2px';
dropdown.style.cursor = 'pointer';
dropdown.style.textAlign = 'left';
dropdown.style.width = '150px';

var chkRed = document.createElement("input");
chkRed.type = "checkbox";
chkRed.id = "chkRed";
chkRed.value = "Red";
chkRed.checked = false;
var lblRed = document.createElement('label')
lblRed.htmlFor = "chkRed";
lblRed.style.color = "#F00";
lblRed.appendChild(document.createTextNode('Red'));

var chkYellow = document.createElement("input");
chkYellow.type = "checkbox";
chkYellow.id = "chkYellow";
chkYellow.value = "Yellow";
chkYellow.checked = false;
var lblYellow = document.createElement('label')
lblYellow.htmlFor = "chkYellow";
lblYellow.style.color = "#FF0";
lblYellow.appendChild(document.createTextNode('Yellow'));

var chkGreen = document.createElement("input");
chkGreen.type = "checkbox";
chkGreen.id = "chkGreen";
chkGreen.value = "Green";
chkGreen.checked = false;
var lblGreen = document.createElement('label')
lblGreen.htmlFor = "chkGreen";
lblGreen.style.color = "#0F0";
lblGreen.appendChild(document.createTextNode('Green'));

var dateFrom = document.createElement("input");
dateFrom.id = "txtDateFrom";
dateFrom.type = "text";
dateFrom.className = "datepicker";
dateFrom.style.width = "70px";
dateFrom.readonly = "readonly";
var lblDateFrom = document.createElement('label')
lblDateFrom.htmlFor = "txtDateFrom";
lblDateFrom.appendChild(document.createTextNode('From'));

var dateTo = document.createElement("input");
dateTo.id = "txtDateTo";
dateTo.type = "text";
dateTo.className = "datepicker";
dateTo.style.width = "70px";
dateTo.readonly = "readonly";
var lblDateTo = document.createElement('label')
lblDateTo.htmlFor = "txtDateTo";
lblDateTo.appendChild(document.createTextNode('To'));

var btnDone = document.createElement("input");
btnDone.type = "button";
btnDone.name = "btnDone";
btnDone.value = "Done";
btnDone.onclick = function () {
    dropdown.style.visibility = "hidden";
};

dropdown.appendChild(chkRed);
dropdown.appendChild(lblRed);
dropdown.appendChild(document.createElement("BR"));
dropdown.appendChild(chkYellow);
dropdown.appendChild(lblYellow);
dropdown.appendChild(document.createElement("BR"));
dropdown.appendChild(chkGreen);
dropdown.appendChild(lblGreen);
dropdown.appendChild(document.createElement("BR"));
dropdown.appendChild(dateFrom);
dropdown.appendChild(document.createElement("BR"));
dropdown.appendChild(dateTo);
dropdown.appendChild(document.createElement("BR"));
dropdown.appendChild(btnDone);

ShowContainerDiv.appendChild(btnShowDiv);
ShowContainerDiv.appendChild(dropdown);

g.event.addDomListener(btnShowDiv, 'click', function () {
    dropdown.visible = true;
    dropdown.style.visibility = "visible";
});

g.event.addDomListener(btnDone, 'click', function () {
    dropdown.visible = false;
    dropdown.style.visibility = "hidden";
});

map.controls[g.ControlPosition.TOP_RIGHT].push(ShowContainerDiv);

Then in a .js file I have this (I checked and I'm including the file)

$(document).ready(function () {
    $(".datepicker").datepicker({
        dateFormat: 'yy/m/d',
        firstDay: 1,
        changeMonth: true,
        changeYear: true,
        showOn: 'both',
        autosize: true,
        buttonText: "Select date",
        buttonImage: '../Content/images/calendar.png',
        buttonImageOnly: true
    });
});

Why the datepicker is not showing up?

回答1:

When you write

$(document).ready(function () {
    $(".datepicker").datepicker({...});
});

This fragment is getting executed right after the page has loaded. Therefore, your dynamic datepickers are not there yet. You need to call $(aSuitableSelector).datepicker(...) on each newly-inserted element. First, use a var to hold your options:

var datePickerOptions = {
    dateFormat: 'yy/m/d',
    firstDay: 1,
    changeMonth: true,
    changeYear: true,
    // ...
}

This allows you to write

 $(document).ready(function () {
    $(".datepicker").datepicker(datePickerOptions);
 });

and to write

 // right after appending dateFrom to the document ...
 $(dateFrom).datepicker(datePickerOptions);

 //...

 // right after appending dateTo ...
 $(dateTo).datepicker(datePickerOptions);

You can also use JQuery's ability to listen to DOM changes to avoid having to apply JS magic to newly-inserted elements -- but I do not think it is worth it.

回答2:

The easiest way I found to add datepicker for dynamically added multiple input field:

    $('body').on('focus',".datepicker", function(){
        $(this).datepicker();
    });

回答3:

The easiest way I found to fix this issue is by using the livequery plugin:

http://docs.jquery.com/Plugins/livequery

Instead of applying the datepickers to all objects of a specific class, you tell LiveQuery to apply it to those objects. LiveQuery will in turn keep applying the datepicker, even when your DOM is changed later on.

I have seen no performance drops when usnig this, and the code changes are really minimal (you need to add the plugin to the page and only change one line of code).

You would be using it like so:

$(".datepicker").livequery(
        function(){ 
            // This function is called when a new object is found. 
            $(this).datepicker({ ...}});
        }, 
        function() { 
            // This function is called when an existing item is being removed. I don't think you need this one so just leave it as an empty function.
        }
);

From then on, every time you add an object with the datepicker class, the datepicker plugin will automatically be applied to it.

回答4:

You can simply use this.

$('body').on('focus',".date-picker", function(){
  $(this).datepicker();
});

回答5:

The code that bind the datepickers is best to be executed right after your html is dinamically created. If you want to keep the code for datepicker initialization in a separate file, I would recommend the following approach: After you finish generating your html (I presume it is generated on document ready), use

$(document).trigger("customHtmlGenerated");

And in the datepicker file, instead of $(document).ready(function(){...}) use $(document).bind("customHtmlGenerated", function(){...});

回答6:

I put the

$( "#InstallDate" ).datepicker({
  showOn: "button",
    minDate: 0, // no past dates
  buttonImage: "../images/Date.png",
  buttonImageOnly: true,
  buttonText: "Select date",
  dateFormat: 'yy-mm-dd',
});

into a script file DatePicker.js and then added the following line at the end of my generated Ajax Html form

<script type='text/javascript' src='/inc/DatePicker.js'></script>

回答7:

$( ".datepicker" ).datepicker({inline: true,dateFormat: "dd-mm-yy"});

回答8:

Please add below code after appending element.

$(".datepicker").datepicker({
        dateFormat: 'yy/m/d',
        firstDay: 1,
        changeMonth: true,
        changeYear: true,
        showOn: 'both',
        autosize: true,
        buttonText: "Select date",
        buttonImage: '../Content/images/calendar.png',
        buttonImageOnly: true
    });

回答9:

I solved for dynamically created input element with this :-

$(document).ready(function () {
    $(selector).removeClass('hasDatepicker').datepicker();
});

回答10:

The jQuery code is executed when the document is ready: this means when the initial markup of your page is ready, not after your javascript files ran.

I suppose your code to initialize the datepickers runs before your script creating the elements does, so nothing happens.

Try executing you jquery code when the page has loaded using .load() instead of .ready(). The load event is fired when all assets (js, image...) have loaded.

$(window).load(function () {
    $(".datepicker").datepicker({
        ...
    });
});

You could also simply use the way javascript is executed. Scripts are executed in the order they happen in the page. So you could:

move your scripts right before the closing body tag ```
make sure your first script (creating the elements) comes before the datepicker code
remove the .ready() handler for the date picker. When you place your script at the end, they are implicitly running when the DOM is ready...

回答11:

It's probably a matter of in which order the javascript is being fired. Try putting

$(".datepicker").datepicker({
    dateFormat: 'yy/m/d',
    firstDay: 1,
    changeMonth: true,
    changeYear: true,
    showOn: 'both',
    autosize: true,
    buttonText: "Select date",
    buttonImage: '../Content/images/calendar.png',
    buttonImageOnly: true
});

After your javascript that creates the html.

来源：https://stackoverflow.com/questions/9640493/jquery-datepicker-not-working-on-dynamically-created-html

标签

javascript

jquery

jquery-plugins

jquery-ui-datepicker