无法为所有列 headers 绑定点击事件。只工作一次

Question

我正在寻求帮助，为什么此代码不适用于列的所有标题。此代码第一次适用于任何列，但不会第二次触发点击事件。为什么 $(ColTh).click(function () 没有附加到 header 中的所有 th？

$("table.ui-datepicker-calendar > thead").find("th[scope='col']").each(function() {
  var ColTh = $(this);

  $(ColTh).click(function() {
    var colIndex = $(ColTh).index();
    var dateList = [];
    $(ColTh).closest('table').find('tr').each(function() {
      var dateTd = $(this).find('td:eq(' + colIndex + ')');
      var month = $(dateTd).attr('data-month'); //.trigger('click');
      var year = $(dateTd).attr('data-year');
      var day = $(dateTd).children(0).text();
      if (typeof month != 'undefined') {
        var monthINT = parseInt(month.trim());
        monthINT = monthINT + 1;
        var newDate = monthINT + '-' + day.trim() + '-' + year.trim();
        dateList.push(newDate);
      }

    });
    $('#itemSchedulerCal').multiDatesPicker('addDates', dateList);
    dateList = [];

  });

});

Answer 1

我不确定你的其余代码，但关于你的绑定，你可以这样做：

$("table.ui-datepicker-calendar").on("click", "th[scope='col']", function() {
  var ColTh = $(this);

  var colIndex = ColTh.index();
  var dateList = [];
  ColTh.closest('table').find('tr').each(function() {
    var dateTd = $(this).find('td:eq(' + colIndex + ')');
    var month = dateTd.attr('data-month'); //.trigger('click');
    var year = dateTd.attr('data-year');
    var day = dateTd.children(0).text();
    if (typeof month != 'undefined') {
      var monthINT = parseInt(month.trim());
      monthINT = monthINT + 1;
      var newDate = monthINT + '-' + day.trim() + '-' + year.trim();
      dateList.push(newDate);
    }

  });
  $('#itemSchedulerCal').multiDatesPicker('addDates', dateList);
  dateList = [];
});

您将 ColTh 用作 $(ColTh)，但 ColTh 已经是一个 jQuery 对象，因为您将其设置为 $(this)。同样适用于 dateTd.

Answer 2

我按照以下步骤实现了上述目标

第 1 步：

jQuery(document).ready(function () {
    $.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker;
    $.datepicker._updateDatepicker = function (inst) {
    $.datepicker._updateDatepicker_original(inst);
    var afterShow = this._get(inst, 'afterShow');
    if (afterShow) {
        // trigger custom callback
        afterShow.apply((inst.input ? inst.input[0] : null));  
    }
}

});

第 2 步：

   $('#itemSchedulerCal').multiDatesPicker({
        showWeek: true,
        minDate: 0,
       dateFormat: "m-d-yy",
    dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    defaultDate: defdate,
    afterShow: function (inst)
    {
        BindClicks();
    }
});

第 3 步：

function BindClicks() {
// paste all above code
}

无法为所有列 headers 绑定点击事件。只工作一次

unable to bind click event for all columns headers. works only one time

javascript

jquery

jquery-ui-datepicker