divコンテンツの変更後にjQueryが応答しない - 委任イベントハンドラ

Question

私のHTML文書では、<div id="basic" data-toggle="calendar"></div>を使用して、カレンダーの外部コンテンツを.jsファイルからインポートします。

私はjQueryを使ってクラスの追加によって<td>フィールドをチェックします。レディテーブルでは、私はこれを行うことができます...

$(window).load(function() { 
    $("td.available.cur-month").on("click", function() { 
    $(".current").removeClass("current"); 
    $(this).addClass("current"); 
    }); 
    $("td.unavailable.cur-month, td.available.near-month").off(); 
}); 

...それはうまく行きます。 しかし、月を変更したとき（<i class="next"></i>または<i class="prev"></i>をクリックすると）jQueryメソッドが停止しています。

...

function($) { 
    var plugin_name = 'calendar', 
    data_key = 'plugin_' + plugin_name, 
    defaults = { 
    modifier: 'datetimepicker', // wrapper class 
    day_first: 1, 
    day_name: ['Nd', 'Pn', 'Wt', 'Śr', 'Cz', 'Pt', 'So'], 
    month_name: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru'], 
    unavailable: ['*-1-1'], 
    paging: ['<i class="prev"></i>', '<i class="next"></i>'], 
    adapter: '', 
    month: null, // month of calendar = month in js + 1, month in js = 0-11 
    year: null, // year of calendar 
    num_next_month: 0, // number of next month to show 
    num_prev_month: 0, // number of prev month to show 
    num_of_week: 'auto', // number of week need to show on calendar number/auto 
    onSelectDate: function(date, month, year) {}, // trigger on select 
    }; 

を私はあきらめなかったと私はJavaScriptファイルに追加さ...上記のようなコードの同じ行と私は、この（コードの最後の行）を取得：

onSelectDate: function(date, month, year) { 
    $("td.available.cur-month").on("click", function() { 
    $(".current").removeClass("current"); 
    $(this).addClass("current"); 
    }); 
    $("td.unavailable.cur-month, td.available.near-month").off(); 

今jQueryが作業していて、2回目のクリックの後にされています。月の変更後にjQueryが動作しなくなり、<td>の一部がクリックされたときに開始されるようです。私は良い仕事スクリプトを持つようにしなければならない何

？

私はこれをhttps://www.phpjabbers.com/free-availability-calendar-script/に使用しました。誰かがこのプロジェクトについてここで質問しますJQUERY JSON returned undefinedしかし、それは異なっていました。

Answer 1

既存のDOM要素にのみイベントをバインドします。 このコードを使用する必要があります。この方法であなたは身体のクリックで結合して、クリックされた要素がtd.available.curヶ月

$(window).load(function() { 
    $("body").on("click", "td.available.cur-month", function() { 
    $(".current").removeClass("current"); 
    $(this).addClass("current"); 
    }); 
    $("td.unavailable.cur-month, td.available.near-month").off(); 
}) 

ある場合cheking。