jquery datepicker不能动态创建html [英] jquery datepicker not working on dynamically created html

问题描述

我正在用内部控件动态创建几个div。其中两个控件应该是datepickers。但由于某种原因，它们没有显示（只显示输入文本）
如果我创建静态html，它会起作用，但是当我使用动态html时则不行。

<这是我用来生成HTML的代码（我可以看到div）

  var ShowContainerDiv = document。的createElement（ 'DIV'）; 
 
 var btnShowDiv = document.createElement（'DIV'）; 
 btnShowDiv.id ='btnShowDiv'; 
 btnShowDiv.title ='改变'; 
 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 ='指针'; 
 dropdown.style.textAlign ='left'; 
 dropdown.style.width ='150px'; 
 
 var chkRed = document.createElement（input）; 
 chkRed.type =复选框; 
 chkRed.id =chkRed; 
 chkRed.value =红色; 
 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 =复选框; 
 chkYellow.id =chkYellow; 
 chkYellow.value =黄色; 
 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 =复选框; 
 chkGreen.id =chkGreen; 
 chkGreen.value =绿色; 
 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 =完成; 
 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（下拉列表）; 
 
 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）; 
  

然后在.js文件中我有这个（我检查过，我包含了文件）

  $（document）.ready（function（）{
 $（。datepicker）。datepicker（{
 dateFormat：'yy / m / d'，
 firstDay：1，
 changeMonth：true，
 changeYear：true，
 showOn：'both'，
 autosize：true，
 buttonText：选择日期，
 buttonImage：'../Content/images/calendar.png'，
 buttonImageOnly：true 
}）; 
}）; 
  

为什么日期选择器没有显示？
谢谢！ Guillermo。

解决方案

写作时

  $（document）.ready（function（）{
 $（。datepicker）。datepicker（{...}）; 
}）; 
  

此片段在页面加载后立即执行。因此，您的动态日期选择器还没有。您需要在每个新插入的元素上调用 $（aSuitableSelector）.datepicker（...）。首先，使用var来保存您的选项：

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

这允许你写

  $（文件）.ready（function（）{
 $（。datepicker）。datepicker（datePickerOptions）; 
}）; 
  

并写入

  //将dateFrom追加到文档后... ... 
 $（dateFrom）.datepicker（datePickerOptions）; 
 
 // ... 
 
 //在追加dateTo后立即... 
 $（dateTo）.datepicker（datePickerOptions）; 
  

你也可以使用JQuery的能力监听DOM更改以避免将JS魔法应用于新插入的元素 - 但我不认为这是值得的。

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? Thanks! Guillermo.

解决方案

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.

这篇关于jquery datepicker不能动态创建html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！