Question

我正在为我的Rails应用程序使用Jquery UI datepicker，我希望每当有人点击下个月的按钮时触发一个事件。但它并没有触发任何东西。我的JQuery版本是v1.12.4。

以下是我的HTML代码示例：

  $('body').on('click','.ui-datepicker-next',function(e){
    console.log('Next/prev month')
    e.preventDefault();
  });

datepicker的HTML代码是JQuery UI生成的默认代码。

所以这是我的javascript尝试：

ui-datepicker-next

它什么都没做！它不会在控制台上引发错误，它不会打印任何内容，也不会将click事件附加到具有$('.ui-datepicker-next').click(function(e){ console.log('Next/prev month') e.preventDefault(); });类的元素。

如果我在控制台中复制并粘贴以下代码，则可以很好地处理文档中的当前元素。

{{1}}

以前从未碰巧过，所以如果这个问题应该更加详细，我很抱歉，但我真的不知道我还应该在这里提到什么。

编辑：

jsfiddle：https://jsfiddle.net/9484zzrL/

这是我迄今为止在jsfiddle上重新创建问题所能做的最好的事情。如果您点击所选月份的某一天就可以了，但如果您更改月份则不再有效。

编辑2：

我相信这完全重现了我的问题。当我在日历中选择任何日期时，不会触发事件。

https://jsfiddle.net/awhwr3uv/

Answer 1

修改

所以我看了你最新的jFiddle。我想知道你是否曾尝试使用过这样的东西：

$("#datepicker1").datepicker({ firstDay: 1, onSelect: function(date) { console.log('Date Selected: ' + date); //Do some other cool stuff here $(this).hide(); } }); $("#datepicker2").datepicker({ firstDay: 1, onSelect: function(date) { console.log('Date Selected: ' + date); //Do some other cool stuff here $(this).hide(); } });

您可以在jFiddle中的onSelect选项中执行您需要的所有内容，它甚至会将日期作为参数传递给回调。

<强>原始

改变这个：

$('body').on('click','.ui-datepicker-next',function(e){ console.log('Next/prev month') e.preventDefault(); //setTimeout(date_picker_listener(),500) });

对此：

$(document).on('click','.ui-datepicker-next',function(e){ console.log('Next/prev month') e.preventDefault(); //setTimeout(date_picker_listener(),500) });

它适用于你的小提琴。

修改

我想解释一下我为什么你的代码没有工作的猜测。

我认为这是因为jQuery已经有一个点击监听器附加到按钮类的body元素。因为2个单击侦听器附加到同一类元素的主体，所以JavaScript引擎到达的第一个是触发的。

当您使用on方法将点击侦听器附加到正文时，JavaScript引擎会不断扫描正文以获取点击，然后检查点击是否与您的选择器匹配。因为jQuery已经在该选择器的主体上具有单击侦听器，所以侦听器从未收到过该事件。

考虑到这一点，将点击侦听器附加到文档中，您将设置一个全新的侦听器，引擎现在还会扫描文档以查看点击次数并看到它与您的选择器匹配。因为你的是唯一一个听你的文件的人。

所以我通过将侦听器从点击更改为鼠标悬停来测试这一点，并确定它有效。

$('body').on('mouseover','.ui-datepicker-next',function(e){ console.log('Next/prev month') e.preventDefault(); //setTimeout(date_picker_listener(),500) });

我希望这会有所帮助。这是我能提出的最好的代码，为什么你的代码不起作用。

Jquery事件监听器没有处理附加的元素（他们应该，不应该吗？）

1 个答案: