jQuery timepicker设置时间单击功能

Question

jQuery timepicker设置按钮单击功能不起作用。

我试图将一个类添加到<div id="ptTimeSelectSetButton">

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

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

我试图在div中使用div id和'​​'标签添加点击功能。

不幸的是，点击功能不起作用。 如果有人知道原因，请在这里分享。

在这里演示

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

您必须将click事件放在$(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');
    });
}); 

Answer 2

显示弹出窗口时div是动态创建的，因此您需要使用事件委托

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

演示： 小提琴

Answer 3

将事件委托用于动态创建的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');
});

小提琴