jquery datepicker不能动态创建html

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery datepicker不能动态创建html相关的知识,希望对你有一定的参考价值。

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

这是我用来生成HTML的代码(我可以看到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);

然后在.js文件中我有这个(我检查过,我包含了文件)

$(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
    });
});

为什么日期选择器没有出现?谢谢!吉列尔莫。

答案

当你写作

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

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

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

这允许你写

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

并写

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

 //...

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

您还可以使用JQuery的listen to DOM changes功能来避免将JS魔法应用于新插入的元素 - 但我认为这不值得。

另一答案

这可能是javascript被解雇的顺序问题。试试看

$(".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
});

在你的javascript创建html之后。

另一答案

我发现添加datepicker以动态添加多个输入字段的最简单方法:

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

我发现解决此问题的最简单方法是使用livequery插件:

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

您可以告诉LiveQuery将其应用于这些对象,而不是将日期选择器应用于特定类的所有对象。即使以后更改了DOM,LiveQuery也会继续应用datepicker。

我已经看到使用它时没有性能下降,并且代码更改实际上是最小的(您需要将插件添加到页面并且只更改一行代码)。

你会像这样使用它:

$(".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.
        }
); 

从那时起,每次使用datepicker类添加对象时,datepicker插件都会自动应用于它。

另一答案

你可以简单地使用它。

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

绑定日期选择器的代码最好在你的html被动态创建之后执行。如果你想将datepicker初始化的代码保存在一个单独的文件中,我建议采用以下方法:在你完成生成html之后(我认为它是在文档就绪时生成的),使用

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

并在datepicker文件中,而不是$(document).ready(function(){...})使用$(document).bind("customHtmlGenerated", function(){...});

另一答案

我把它

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

到一个脚本文件DatePicker.js,然后在我生成的Ajax Html表单的末尾添加以下行

<script type='text/javascript' src='/inc/DatePicker.js'></script> 
另一答案
$( ".datepicker" ).datepicker({inline: true,dateFormat: "dd-mm-yy"});
另一答案

请在追加元素后添加以下代码。

$(".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
    });
另一答案

文档准备就绪时执行jQuery代码:这意味着页面的初始标记准备就绪,而不是在运行javascript文件之后。

我想你的代码初始化datepickers运行在创建元素的脚本之前运行,所以没有任何反应。


当使用.load()而不是.ready()加载页面时,尝试执行jquery代码。加载所有资产(js,image ...)时会触发load事件。

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

您也可以简单地使用javascript的执行方式。脚本按照它们在页面中发生的顺序执行。所以你可以:

  • 在结束体标记```之前移动你的脚本
  • 确保你的第一个脚本(创建元素)出现在datepicker代码之前
  • 删除日期选择器的.ready()处理程序。当您将脚本放在最后时,它们在DOM准备就绪时隐式运行...

以上是关于jquery datepicker不能动态创建html的主要内容,如果未能解决你的问题,请参考以下文章

html表中的jquery datepicker,动态创建行

jQuery Datepicker 在动态元素中不起作用

动态创建的文本框想要加上jQuery的datepicker功能变成日期选择控件该怎么办?

在AngularJS中为jQuery datepicker动态设置最大限制

在 Jquery Datepicker 中动态更改突出显示的日期

jquery datepicker超出css范围