web-dev-qa-db-ja.com

動的に作成された要素にdatepicker（）を配置する-JQuery / JQueryUI

テキストボックスを動的に作成しました。各テキストボックスでクリック時にカレンダーを表示できるようにします。私が使用しているコードは次のとおりです。

$(".datepicker_recurring_start" ).datepicker();

すべてのテキストボックスにdatepicker_recurring_startというクラスがありますが、これは最初のテキストボックスでのみ機能します。

あなたの助けは大歓迎です！

javascriptjqueryjquery-uidatepicker
109
steeped

ここにトリックがあります：

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

DEMO

$('...selector..').on('..event..', '...another-selector...', ...callback...);構文の意味は次のとおりです。
イベント...selector..（この例では 'focus'）の..event..（この例ではbody）にリスナーを追加します。セレクター...another-selector...（この例では.datepicker_recurring_start）に一致する一致するノードのすべての子孫に対して、イベントハンドラー...callback...（この例ではインライン関数）を適用します

http://api.jquery.com/on/ および特に「委任されたイベント」に関するセクションを参照してください

249
ilyes kooli

私の下ではjqueryが機能しました：

「ボディ」をドキュメントに変更

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

skafandri に感謝

注：各フィールドでIDが異なることを確認してください

42
Tapash

Skafandri +1による優れた回答

HasDatepickerクラスを確認するために更新されました。

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

    if( $(this).hasClass('hasDatepicker') === false )  {
        $(this).datepicker();
    }

});
13
pleshy

.date-pickerクラスの要素にhasDatepickerクラスがまだないことを確認してください。その場合、$myDatepicker.datepicker();で再初期化しようとしても失敗します！代わりにあなたがする必要があります...

$myDatepicker.removeClass('hasDatepicker').datepicker();
11
wintondeshong

他のテキストボックス要素を動的に作成した後、.datepicker();を再度実行する必要があります。

DOMに要素を追加する呼び出しのコールバックメソッドで行うことをお勧めします。

したがって、JQuery Loadメソッドを使用してソースから要素を取得し、DOMに要素をロードするとします。次のようにします。

$('#id_of_div_youre_dynamically_adding_to').load('ajax/get_textbox', function() {
  $(".datepicker_recurring_start" ).datepicker();
});
5
Tr1stan

動的要素の新しいメソッドは MutationsObserver ..です。次の例では nderscore.js を使用して（_.each）関数を使用しています。

MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;    

var observerjQueryPlugins = new MutationObserver(function (repeaterWrapper) {

    _.each(repeaterWrapper, function (repeaterItem, index) {

        var jq_nodes = $(repeaterItem.addedNodes);

        jq_nodes.each(function () {

            // Date Picker
            $(this).parents('.current-repeateritem-container').find('.element-datepicker').datepicker({
                dateFormat: "dd MM, yy",
                showAnim: "slideDown",
                changeMonth: true,
                numberOfMonths: 1
            });

        });

    });

});

observerjQueryPlugins.observe(document, {
    childList: true,
    subtree: true,
    attributes: false,
    characterData: false
});
1
Hady Shaltout

これは私にとってJQuery 1.3でうまくいき、最初のクリック/フォーカスで表示されています

function vincularDatePickers() {
    $('.mostrar_calendario').live('click', function () {
        $(this).datepicker({ showButtonPanel: true, changeMonth: true, changeYear: true, showOn: 'focus' }).focus();
    });
}

これには、入力にクラス「mostrar_calendario」が必要です

Liveは、これを「オン」に適応させる必要がある新しいバージョンのJQuery 1.3+用です

違いの詳細はこちらをご覧ください http://api.jquery.com/live/

0
Mauricio Gracia Gutierrez

他のソリューションはどれも私にとってはうまくいきませんでした。私のアプリでは、jqueryを使用して日付範囲要素をドキュメントに追加し、datepickerをそれらに適用しています。そのため、何らかの理由でイベントソリューションが機能しませんでした。

これが最終的に機能したものです：

$(document).on('changeDate',"#elementid", function(){
    alert('event fired');
});

これが誰かを助けてくれることを願っています。

0
Chris

.datepicker_recurring_startクラスを持つすべての入力にdatepickerコンストラクターを再適用しないように、@ skafandriの回答を変更しました。

HTMLは次のとおりです。

<div id="content"></div>
<button id="cmd">add a datepicker</button>

JSは次のとおりです。

$('#cmd').click(function() {
  var new_datepicker = $('<input type="text">').datepicker();
  $('#content').append('<br>a datepicker ').append(new_datepicker);
});

作業デモ

0
c0x6a

javascript関数にクラス.datepickerを追加して、入力タイプを動的に変更できます

 $("#ddlDefault").addClass("datepicker");
 $(".datepicker").datetimepicker({ timepicker: false, format: 'd/m/Y', });
0
Nada N. Hantouli
$( ".datepicker_recurring_start" ).each(function(){
    $(this).datepicker({
        dateFormat:"dd/mm/yy",
        yearRange: '2000:2012',
        changeYear: true,
        changeMonth: true
    });
});
0
Siya Qalistic