Peniakoff Peniakoff - 3 months ago 14
Javascript Question

jQuery doesn't respond after change of div content - delegated event handler

In my html document I use

<div id="basic" data-toggle="calendar"></div>
to import external content of calendar from .js file.

I want check
<td>
fields by add class with jQuery. In the ready table I can do this with...

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


...and it goes fine. But when I change the month (by clicking
<i class="next"></i>
or
<i class="prev"></i>
) jQuery method is stopping
.

I didn't give up and I added to the JavaScript file...

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
};


...the same lines of code like above and I get this (last lines of code):

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


Now jQuery is working, but after the second click. It looks like jQuery doesn't work after change of the month and start when some of
<td>
is clicked.


What I have to do to have good working script?

The code of the calendar script I wrote here JsFiddle (I've used this https://www.phpjabbers.com/free-availability-calendar-script/) and someone ask about this project here JQUERY JSON returned undefined but it was different case.

Answer

You bind event only on existing DOM elements. You should use this code. This way you binding on body click and then cheking if clicked element is td.available.cur-month

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

;