Jquery事件监听器不工作附加元素（和他们应该，不应该他们？）

Question

我正在使用Jquery UI日期选择器为我的Rails应用程序，并且我想触发一个事件，只要有人点击下个月的按钮。但它并没有触发任何东西。我的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) 
}); 

它可以在你的提琴。

编辑

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

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

实际上，当你使用方法上的JavaScript引擎不断地扫描人体的点击，然后检查是否点击符合您选择附加点击收听到身体。因为jQuery已经在该选择器的主体上具有单击侦听器，所以您的侦听器从未收到该事件。

考虑到这一点通过点击监听器连接到文件，你有一个全新的监听器设置和发动机目前也用于扫描点击文件，看到它你的选择相匹配。因为你是唯一一个听取文件的人，所以你会得到这个活动。

所以我通过点击鼠标悬停果然它的工作原理改变听者测试这一点。

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

我希望这有助于。这是我能想出的最好的代码为什么不起作用。