apply.daterangepicker 当重新附加 daterangepicker() 构造函数时事件停止触发

Question

我使用的daterangepicker版本：3.0.3

我有一对单选按钮，可以让用户在本地时间和 utc 时间之间切换。当我单击单选按钮时，我想删除并重新附加 daterangepicker 构造函数，以便我可以指定不同的预定义日期范围。

但是，单击单选按钮后，当我单击 "Apply" 或单击预定义的日期范围时，daterangepicker 会停止触发事件。

我在 jsfiddle 上制作了我的程序的简化版本，但应用事件仍然没有触发

https://jsfiddle.net/flexmcmurphy/re62qhb8/4/

代码如下：

<html>
<head>
<title>Test2.html</title>
    <script src="include/jquery-3.3.1.js"></script>
    <script src="include/moment.js"></script>
    <script src="include/daterangepicker.js"></script>
    <link rel="stylesheet" type="text/css" href="include/daterangepicker.css" />
</head>
<body>
<input type="text" name="datetimes"/>
Local <input type="radio" name="timeformat" value="local" checked="checked"><span id="mybar">|</span><input type="radio" name="timeformat" value="utc"> UTC

<script>

// Global Variables
var selectedtimeformat;

// Set the selectedtimeformat variable on page load
$( document ).ready(function() {
    setSelectedTimeFormat();
    attachpicker();
});

$("input[type='radio']").click(function(){
    var radioValue = $("input[name='timeformat']:checked").val();
        if(radioValue != selectedtimeformat){
            setSelectedTimeFormat();
            if(selectedtimeformat == 'utc'){
                $('input[name="datetimes"]').data('daterangepicker').remove();
                attachpicker();
            }else{
                // Re-attach the DRP so the startDate, endDate, minDate and maxDate settings are updated for the UTC/local time choice
                $('input[name="datetimes"]').data('daterangepicker').remove();
                attachpicker();
            }
        }       
});  // end function $("input[type='radio']").click(function(){...}

function setSelectedTimeFormat(){
    selectedtimeformat = $("input[name='timeformat']:checked").val();
    alert("selectedtimeformat: " + selectedtimeformat);
}

function attachpicker(){

if(selectedtimeformat == 'local'){
    $('input[name="datetimes"]').daterangepicker({
    "opens": 'right',
    "drops": 'down',
    "timePicker": true,
    "locale": {
      "format": 'MM/DD/YYYY'
    },
    "alwaysShowCalendars": true,    
    "ranges": {
        'Today': [moment(), moment()],
        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    },
    "startDate": "04/08/2019",
    "endDate": "04/10/2019",
    "minDate": "04/05/2019",
    "maxDate": "04/18/2019",
    "timePickerIncrement": 10,
    "timePicker24Hour": true
    }); // <-- end of daterangepicker() constructor
}else{
// selectedtimeformat == 'utc'
    $('input[name="datetimes"]').daterangepicker({
    "opens": 'right',
    "drops": 'down',
    "timePicker": true,
    "locale": {
      "format": 'MM/DD/YYYY'
    },
    "alwaysShowCalendars": true,
    "ranges": {
        'Today': [moment(), moment()],
        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    },
    "startDate": "04/08/2019",
    "endDate": "04/14/2019",
    "minDate": "04/05/2019",
    "maxDate": "04/18/2019",
    "timePickerIncrement": 10,
    "timePicker24Hour": true
    }); // <-- end of daterangepicker() constructor
}

}   //<-- end of function attachpicker()

$('input[name="datetimes"]').on('apply.daterangepicker', function(ev, picker) {
    alert("apply.daterangepicker event fired");
});

</script>

</body>
</html>

预期结果： 当我更改 selected 单选按钮然后 select 预定义的日期范围或单击 daterangepicker 中的 "apply" 时，应该触发 apply.daterangepicker 事件并弹出 alert()应该显示事件已触发。

即：应该删除 daterangepicker 构造函数并重新附加新属性。

这应该会发生，因为在更改单选按钮时会调用我的 attachpicker() 方法。

实际结果： 相反，当我更改 selected 单选按钮然后 select 预定义的日期范围或单击 daterangepicker 中的 "apply" 时，我没有弹出显示应用事件的警报解雇了。

然而...

当我更改 selected 单选按钮时，文本框中显示的开始日期和结束日期会正确更新。

使用本地单选按钮 selected： "startDate": "04/08/2019" "endDate": "04/10/2019"

UTC 单选按钮 selected： "startDate": "04/08/2019" "endDate"：“2019 年 4 月 14 日”

所以这告诉我 daterangepicker 构造函数确实重新附加了新属性，只是应用事件停止触发。

这是为什么？

Answer 1

您正在调用的 remove() 函数会删除您正在销毁的日期范围选择器的所有事件侦听器。

将您的 apply.daterangepicker 侦听器创建移动到 attachpicker() 函数中。

apply.daterangepicker 当重新附加 daterangepicker() 构造函数时事件停止触发

apply.daterangepicker event stops firing when daterangepicker() constructor re-attached

javascript

jquery

daterangepicker