javascript - Jquery 事件监听器不适用于附加元素(它们应该，不应该吗？)

Question

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

这是我的 html 代码示例:

<input type='text' name='date_from' class="form-control date_picker" placeholder="Data de ida..." id='datetimepicker1' required/>
<div id="datepicker1" class="calendar"></div>

日期选择器的 HTML 代码是由 JQuery UI 默认生成的。

这是我的 JavaScript 尝试:

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

它什么也没做!它不会在控制台上引发错误，不会打印任何内容，也不会使用 ui-datepicker-next 类将单击事件附加到元素。

如果我将以下代码复制并粘贴到控制台中，它适用于文档中的当前元素。

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

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

编辑:

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

它可以在你的 fiddle 中工作。

编辑

我想解释一下我对为什么你的代码不起作用的猜测。

我认为这是因为 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)
});

我希望这会有所帮助。关于为什么你的代码不起作用，这是我能想到的最好的方法。