javascript - datepicker onselect 不起作用 [当 datepicker div 动态创建时]

Question

我有一个 datepicker 函数，它似乎可以工作，但它的 onSelect 函数不起作用，我看不到 alert()

$(function() {
var divContent = '<input type="text" placeholder="Enter date" class="dupInput" id="gl_img_datepicker" readonly=""><button id="gl_img_datepicker_init">Date</button>';


jQuery('body').on('click', '#gl_img_datepicker_init', function(e) {
        jQuery("#gl_img_datepicker").datepicker('show');
 });

//onselect datepicker function 
jQuery('#gl_img_datepicker').datepicker('option', 'onSelect',
   function(dateText, inst) {
     alert('glImgExpiry-->' + dateText);
});
jQuery('body').on('click', '#mybutton', function(e) {
  jQuery("#my_div").append(divContent)
  jQuery("#gl_img_datepicker").datepicker();        
});

});

检查我的 Fiddle

---

我已经看到了以下问题，但没有帮助。

Datepicker onSelect Not Firing

jquery datepicker onselect not working

Datepicker onSelect not working

jQuery Datepicker onSelect is not working

谢谢

Answer 1

您尝试将该事件分配给尚不存在的字段(即在创建 #gl_img_datepicker 并将其插入文档之前)。像这样尝试一下(这里是 JSFiddle ):

$(function() {
    var divContent = '<input type="text" placeholder="Enter date" class="dupInput" id="gl_img_datepicker" readonly=""><button id="gl_img_datepicker_init">Date</button>';


    jQuery('body').on('click', '#gl_img_datepicker_init', function(e) {
            jQuery("#gl_img_datepicker").datepicker('show');
     });

    jQuery('body').on('click', '#mybutton', function(e) {
        jQuery("#my_div").append(divContent)
        jQuery("#gl_img_datepicker").datepicker();    

        // We have already appended the divContent to the document; we
        // can continue with the actual datepicker event for that field

        //onselect datepicker function 
        jQuery('#gl_img_datepicker').datepicker('option', 'onSelect',
           function(dateText, inst) {
             alert('glImgExpiry-->' + dateText);
        });    
    });

});