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

我希望這有助於。這是我能想出的最好的代碼爲什麼不起作用。