123

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

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

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

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

4

13 に答える 13

290

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

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

デモ

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

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

于 2012-05-03T14:18:26.103 に答える
49

以下の私にとって、jqueryは機能しました：

「本文」をドキュメントに変更する

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

スカファンドリに感謝

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

于 2014-02-12T09:37:12.073 に答える
6

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

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

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

$('#id_of_div_youre_dynamically_adding_to').load('ajax/get_textbox', function() {
  $(".datepicker_recurring_start" ).datepicker();
});
于 2012-05-03T14:12:48.100 に答える
1

動的要素の新しいメソッドはMutationsObserverです。次の例では、underscore.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
});
于 2016-04-04T16:22:10.473 に答える
0

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

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

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

これが私を少し後退させたので、これが誰かを助けることを願っています.

于 2016-03-22T17:09:57.643 に答える
0 
$( ".datepicker_recurring_start" ).each(function(){
    $(this).datepicker({
        dateFormat:"dd/mm/yy",
        yearRange: '2000:2012',
        changeYear: true,
        changeMonth: true
    });
});
于 2018-07-11T07:57:50.860 に答える