自我执行函数jQuery中的onClick触发一次

Question

我正在使用jQuery datepicker，并且需要一个自执行函数才能使其正常工作，因此我的JS如下所示：

    $(function(){
        $('#datepicker').datepicker({
            // beforeShowDay: disableSpecificDays,
            inline: true,
            showOtherMonths: true,
            dayNamesMin: [ "M", "T", "W", "T", "F", "S", "S" ],
        });

        $('#datepicker td').on('click', function() {
            console.log($(this).text());
        });
    });

我的onClick事件有效，但仅触发一次。 如果我从功能中删除它，则根本不会触发。

有人知道为什么吗？

Answer 1

尝试使用onSelect事件：

$('#datepicker').datepicker({
     onSelect: function(dateText, inst) { 
        console.log(dateText);
         // you code here.. 
     }
 });

选择日期选择器时调用。 该函数将选择的日期作为文本接收，并将datepicker实例作为参数接收。 这是指关联的输入字段。

或者，您可以简单地将事件重新附加到ui-datepicker元素：

   var element = document.getElementById('datepicker'),
    cols = element.getElementsByTagName("td");

   attachEvents(); // call function on load

   function attachEvents() {
     for(var i = 0; i < cols.length; i++) {
         cols[i].addEventListener("click", function (ev) {
            console.log(this);
            attachEvents();
          }, false);
     }
    }

Answer 2

附加点击侦听器时，DOM元素尚不存在。 要解决此问题，您需要使用委托事件。 尝试使用以下代码片段：

$(function() {
    $('#datepicker').datepicker({
        // beforeShowDay: disableSpecificDays,
        inline: true,
        showOtherMonths: true,
        dayNamesMin: ["M", "T", "W", "T", "F", "S", "S"],
    });

    $('#datepicker').on('click', 'td', function() {
        console.log($(this).text());
    });
});