无法为所有列标题绑定click事件。只工作一次

时间:2017-04-17 19:45:21

标签: javascript jquery jquery-ui-datepicker

我正在寻找帮助,为什么此代码不适用于列的所有标题。此代码适用于任何列的第一次,但不会第二次触发单击事件。为什么$(ColTh).click(function ()没有附加到标题中的所有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 = [];

  });

});

2 个答案:

答案 0 :(得分:0)

我不确定你的其他代码,但关于你的绑定,你可以这样做:

$("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

答案 1 :(得分:0)

我做了以下步骤以实现上述

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