Question

在我的HTML中，我有两个不同的日期选择器，在两个不同的div中。我想在从datepicker中选择一天时做一些事情，如下所示：

$('#details1 tr .ui-body-c').on('click', function(){
    $('#details1 .hasDatepicker').hide();
    if($('#date1').val()!="")
    {
        var day=new Date($('#date1').val());
        day.setHours(23);
        day.setMinutes(59);
        day.setSeconds(59);

        getDayData(day);
    }
});

但是点击这一天并不会触发点击事件。如果我从选择器中删除＃details1，则会触发事件，但会同时使用两个日期选择器。

以下是datepicker插件的链接：http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/

编辑：似乎在页面内未检测到表jquery-mobile datepicker创建的内容。我甚至试过这个：

$('html tr .ui-body-c').on('click', function(){
   $('#details1 .hasDatepicker').hide();
    if($('#date1').val()!="")
    {
        var day=new Date($('#date1').val());
        day.setHours(23);
        day.setMinutes(59);
        day.setSeconds(59);

        getDayData(day);
    }
});

并没有奏效。也做了var a = $('.datepicker-calendar').parent()并得到了[]。

对于为什么会发生这种情况以及如何解决它的想法？

Answer 1

编辑：我很抱歉，我应该仔细研究一下datepicker的移动版本。您的问题很可能是由于它稍后将表添加到DOM，您需要从静态事件委托事件，例如：

$('#details1').on('click', 'tr .ui-body-c', function(){

如果datepicker的移动版本与普通的jQuery UI相同，那么在第一次初始化时最好使用onSelect事件，例如：

$('#details1').datepicker({
    onSelect: function(dateText, inst) {
        inst.input.hide();
        var day=new Date(dateText);
        day.setHours(23);
        day.setMinutes(59);
        day.setSeconds(59);

        getDayData(day);
    }
});

当您选择一天时触发此事件，dateText是它将输入到输入中的值（不需要自己获取），而inst是包含有问题的输入的datepicker实例（inst.input）。 / p>

Answer 2

我通过编辑jquery.ui.datepicker.mobile.js文件，为元素添加自定义类来解决这个问题。

if(options.altField!=undefined)
    $(dp).attr('id', options.altField.split('#')[1] + '1');

然后在function updateDatepicker(){

$( ".ui-datepicker-calendar td", dp ).addClass("ui-body-c "+$(dp).attr('id')+'2');

因此，如果我的日期输入ID是“myDatePicker”，则日历上的每个td都会有“myDatePicker12”类，我可以这样做：

$('.myDatePicker12').on('click', function(){
   $('#details1 .hasDatepicker').hide();
    if($('#date1').val()!="")
    {
        var day=new Date($('#date1').val());
        day.setHours(23);
        day.setMinutes(59);
        day.setSeconds(59);

        getDayData(day);
    }
});

jQuery选择器与jquery-mobile datepicker不兼容

2 个答案: