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方法正在停止。

我没有放弃，我加入了JavaScript文件......

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

...像上面这样的代码行，我得到了这个（最后一行代码）：

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正在运行，但是在第二次点击之后。看起来jQuery在月份更改后无法正常工作，并且在点击某些<td>时开始。

我必须做些什么才能拥有良好的工作脚本？

我已经使用了这个https://www.phpjabbers.com/free-availability-calendar-script/），有人在这里询问了这个项目JQUERY JSON returned undefined，但情况不同。

Answer 1

仅在现有DOM元素上绑定事件。您应该使用此代码。这样，如果点击的元素为 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();
})

更改div内容后jQuery没有响应 - 委托事件处理程序

1 个答案: