ホバーブートストラップdatepicker

Question

私はその行の1つにマウスを入力するときに何かのフォーマットを行うためにJQueryのhover()関数を使用しようとしていますが残念ながら私のhover()は決して呼び出されません。ここで

は、私は私の日付ピッカーを初期化する方法である：

$(".bootstrap-datetimepicker-widget tr").hover(
    function() { 
    console.log('in'); 
    }, function() { 
    console.log('out'); 
    } 
); 

しかし、誰ログが書き込まれませんされています：ここで

//WEEK PICKER 
moment.locale('fr', { 
    week: { dow: 1 } // Monday is the first day of the week 
}); 

//Initialize the datePicker(I have taken format as mm-dd-yyyy, you can  //have your owh) 
$("#weeklyDatePicker").datetimepicker({ 
    format: 'MM-DD-YYYY' 
}); 

//Get the value of Start and End of Week 
$('#weeklyDatePicker').on('dp.change', function (e) { 
    var value = $("#weeklyDatePicker").val(); 
    var firstDate = moment(value, "MM-DD-YYYY").weekday(0).format("MM-DD-YYYY"); 
    var lastDate = moment(value, "MM-DD-YYYY").weekday(6).format("MM-DD-YYYY"); 
    $("#weeklyDatePicker").val(firstDate + " - " + lastDate); 
}); 

は私hover()機能を設定しています方法です。私は私のCSSでこれを得たので右のセレクタを持っていると確信しています：

.bootstrap-datetimepicker-widget tr:hover { 
    background-color: #808080; 
} 

そして、マウスがホバーすると色が更新されています。

ここでEDIT

---

は私のコードに再現Jfiddleです：https://jsfiddle.net/5kzjvL1u/

Answer 1

を私は、ページが読み込まれた後にそれがDOM intorロードされているということでロバート・Cは、彼のコメントで正しいと信じています:hoverを入力フィールドのクリックイベント内に配置することをお勧めします。実際の例については、このスニペットを参照してください。

$(document).ready(function() { 
 
    moment.locale('fr', { 
 
    week: { 
 
     dow: 1 
 
    } // Monday is the first day of the week 
 
    }); 
 

 
    //Initialize the datePicker(I have taken format as mm-dd-yyyy, you can  //have your owh) 
 
    $("#weeklyDatePicker").datetimepicker({ 
 
    format: 'MM-DD-YYYY' 
 
    }); 
 

 
    $('#weeklyDatePicker').on('dp.change', function(e) { 
 
    var value = $("#weeklyDatePicker").val(); 
 
    var startDate = moment(value, "MM-DD-YYYY").weekday(0).format("MM-DD-YYYY"); 
 
    var endDate = moment(value, "MM-DD-YYYY").weekday(6).format("MM-DD-YYYY"); 
 
    $("#weeklyDatePicker").val(startDate + " - " + endDate); 
 
    }); 
 

 
    $("#weeklyDatePicker").click(function() { 
 
    $(".bootstrap-datetimepicker-widget tr").hover(
 
     function() { 
 
     console.log('in'); 
 
     }, 
 
     function() { 
 
     console.log('out'); 
 
     } 
 
    ); 
 
    }); 
 
});

.bootstrap-datetimepicker-widget tr:hover { 
 
    background-color: #808080; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<script src="https://cdn.jsdelivr.net/bootstrap.datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6 form-group"> 
 
     <div class="input-group" id="DateDemo"> 
 
     <input type='text' id='weeklyDatePicker' placeholder="Select Week" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>