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

Question

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?

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.

You need to use a delegated event handler as the calendar is recreating the elements on the change of the months — Rory McCrossan, Aug 30 '16 at 14:49
Thank you, I didn't know how can I use this delegated event handler in my case. — Peniakoff, Aug 30 '16 at 15:03

score 1 · Accepted Answer · answered Aug 30 '16 at 14:49

1

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

;

answered Aug 30 '16 at 14:49

Beneris

575
3
11

I forget about "body". Thank you, it's going now very well. – Peniakoff Aug 30 '16 at 15:15

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

1 Answers1