jQueryのイベントハンドラは

Question

を動作しません、私はjQueryのUI-日付ピッカーを追加しようとしていると私は、イベントハンドラの作業を取得することはできません。

$('.ui-datepicker').on('click', 'a.ui-datepicker-next', 'a.ui-datepicker-prev', function(event) { 
    event.preventDefault(); 
     console.log("CLICK"); 
}); 

私は何もログを持っています私がリンクをクリックするとコンソール。ここにhtmlがあります：

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"...> 
    <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix- ui-corner-all"> 
     <a class="ui-datepicker-next ui-corner-all"...></a> 
     <a class="ui-datepicker-prev ui-corner-all"...></a> 
     ... 

これを引き起こすイベントハンドラとして何を配置する必要がありますか？ jQueryは、私のhtmlのフッタの<script>jQuery here</script>にあります。

EDIT：リンクが正しくありませんでした - a.ui-datepicker-monthとa.ui-datepicker-yeara.ui-datepicker-nextとa.ui-datepicker-prev

に変更おかげ

Answer 1

あなたの構文は非常に適切ではありません。セレクタはコンマで区切る必要がありますが、同じ文字列で区切ります。

$('.ui-datepicker').on('click', 'a.ui-datepicker-month, a.ui-datepicker-year', function(e) { 
    e.preventDefault(); 
    console.log("CLICK"); 
}); 

注：'a.ui-datepicker-month, a.ui-datepicker-year'これを試してみてください。また、eではなく、eventであることに注意してください。これは一部のブラウザが持つグローバルイベントオブジェクトを上書きするためです。質問の後

*更新を編集しました：

他の二つの問題があります。まず、正しいクラスはa.ui-datepicker-prevとa.ui-datepicker-nextです。また、ui.-datepicker要素はDOMのロード時に存在しないため、イベントをバインドするものはありません。これを修正するには、$(document)を使用することができますが、ロード時にDOMのDOMをターゲットにするのに最も近い親要素を使用するのが理想的です。

$(document).on('click', 'a.ui-datepicker-prev, a.ui-datepicker-next', function(e) { 
    e.preventDefault(); 
    console.log("CLICK"); 
}); 

Working example