jquerytimepicker设置时间点击功能

Question

Jquery timepicker 设置按钮点击功能不工作。

我尝试添加一个 class 到 <div id="ptTimeSelectSetButton">

使用$('#ptTimeSelectSetButton a').addClass('timePickClass');

<div id="ptTimeSelectSetButton">这是一个div内部时间选择器

我尝试在 div.

中使用 div id 和 '' 标签添加点击功能

很遗憾，点击功能无法使用。如果有人知道原因请在这里分享。

HERE DEMO

html 页

Start Time <input id="sample1" type="text"></input>
End Time <input id="sample2" type="text"></input>

脚本

$(document).ready(function(){ 
    $("#sample1").ptTimeSelect();
    $("#sample2").ptTimeSelect();
    $('#ptTimeSelectSetButton a').addClass('timePickClass');
}); 
// click on div
$('#ptTimeSelectSetButton').click(function(e) {
          alert('Working with div id');
});
//or click on <a href> tag 
$(".timePickClass").click(function(e) {
    alert('working with a tag class');
});

Answer 1

div 是在显示弹出窗口时动态创建的，因此您需要使用 event delegation

$(document).on('click', '#ptTimeSelectSetButton a', function (e) {
    alert('Working with div id');
});

演示：Fiddle

Answer 2

对动态创建的 DOM 元素使用 事件委托

$(document).ready(function(){ 
    $("#sample1").ptTimeSelect();
    $("#sample2").ptTimeSelect();
    $('#ptTimeSelectSetButton a').addClass('timePickClass');
}); 
// click on div
$(document).on('click', '#ptTimeSelectSetButton', function(e) {
          alert('Working with div id');
});
//or click on <a href> tag 
$(document).on('click', ".timePickClass" ,function(e) {
    alert('working with a tag class');
});

Fiddle

Answer 3

您必须将点击事件放在 $(document).ready 中，或者像其他人所说的那样使用事件委托：

$(document).ready(function(){ 
    $("#sample1").ptTimeSelect();
    $("#sample2").ptTimeSelect();
    $('#ptTimeSelectSetButton a').addClass('timePickClass');

    //or click on <a href> tag 
    $(".timePickClass").click(function(e) {
        alert('working with a tag class');
    });
    // click on div
    $('#ptTimeSelectSetButton').on('click', function(e) {
              alert('Working with div id');
    });
});

jquerytimepicker设置时间点击功能

jquery timepicker set time click function

javascript

jquery

html

css

timepicker