web-dev-qa-db-ja.com

jquery datepickerが動的に作成されたhtmlで機能しない

内部コントロールを備えたdivのカップルを動的に作成しています。これらのコントロールのうち2つは、日付ピッカーである必要があります。しかし、何らかの理由で表示されません（入力テキストのみが表示されます）静的な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
    });
});

日付ピッカーが表示されないのはなぜですか？

javascriptjqueryjquery-pluginsjquery-ui-datepicker
20
polonskyg

あなたが書くとき

_$(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の機能を使用して DOMの変更をリッスンする を使用して、JSマジックを新しく挿入された要素に適用する必要を回避することもできますが、その価値はないと思います。

28
tucuxi

動的に追加された複数の入力フィールドに日付ピッカーを追加するために見つけた最も簡単な方法：

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

簡単に使えます。

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

この問題を修正するために見つけた最も簡単な方法は、livequeryプラグインを使用することです。

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

特定のクラスのすべてのオブジェクトに日付ピッカーを適用する代わりに、それらをそれらのオブジェクトに適用するようにLiveQueryに指示します。 DOMが後で変更された場合でも、LiveQueryは日付ピッカーを適用し続けます。

これを使用してもパフォーマンスの低下は見られず、コードの変更は本当に最小限です（プラグインをページに追加してコードを1行だけ変更する必要があります）。

あなたはそれを次のように使用するでしょう：

$(".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プラグインが自動的に適用されます。

2
Flater

要素を追加した後、以下のコードを追加してください。

$(".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
    });
0
BalaNagaPrasad
$( ".datepicker" ).datepicker({inline: true,dateFormat: "dd-mm-yy"});
0
Vipin Yadav

これで動的に作成された入力要素を解決しました：-

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

日付ピッカーをバインドするコードは、htmlが動的に作成された直後に実行するのが最適です。 datepickerの初期化用のコードを別のファイルに保持したい場合は、次の方法をお勧めします。

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

そしてdatepickerファイルでは、$(document).ready(function(){...})の代わりに$(document).bind("customHtmlGenerated", function(){...});を使用してください

0
FreeCandies

私は

$( "#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>
0
zzapper