Question

我有两个分别带有start_date和end_date的文本框。

在使用datepicker启动之后我无法addEventListener我无法处理文本框中的事件。下面是我的js代码。

document.addEventListener("DOMContentLoaded",function(){
                    //$("#start_date").datepicker();
                    $("#end_date").datepicker();
                    /*$('.d_picker').keydown(function (){
                       return false; 
                    });*/
                    var startDate = document.getElementById('start_date');
                    startDate.addEventListener('change',function (){
                        /*startDateVal = document.getElementById('start_date').value;
                        $("#end_date").datepicker("option","minDate",startDateVal);*/
                        console.log('Element '+this.name+' clicked');
                    },true);

                    var endDate = document.getElementById('end_date');
                    endDate.addEventListener('change',function (){
                        console.log('Element '+this.name+' clicked');
                    },true);
                });

我在控制台中输出以下内容：

点击元素start_date

但是在更改时永远不会触发end_date事件

<html>
    <head>
        <title>event listeners in javascript</title>
        <link type="text/css" rel="stylesheet" href="assets/third_party_libs/jquery/jquery_ui/jquery-ui.css">
    </head>
    <body>
        <table>
            <tr>
                <td>Start Date</td>
                <td><input type="text" id="start_date" name="start_date" class="d_picker" /></td>
            </tr>
            <tr>
                <td>End Date</td>
                <td><input type="text" id="end_date" name="end_date" class="d_picker" /></td>
            </tr>
        </table>
        <script src="assets/third_party_libs/jquery/jquery.js"></script>
        <script src="assets/third_party_libs/jquery/jquery_ui/jquery-ui.js"></script>
        <script type="text/javascript">
            document.addEventListener("DOMContentLoaded",function(){
                //$("#start_date").datepicker();
                $("#end_date").datepicker();
                /*$('.d_picker').keydown(function (){
                   return false; 
                });*/
                var startDate = document.getElementById('start_date');
                startDate.addEventListener('change',function (){
                    /*startDateVal = document.getElementById('start_date').value;
                    $("#end_date").datepicker("option","minDate",startDateVal);*/
                    console.log('Element '+this.name+'clicked');
                },true);

                var endDate = document.getElementById('end_date');
                endDate.addEventListener('change',function (){
                    console.log('Element '+this.name+'clicked');
                },true);
            });
        </script>
    </body>
</html>

Answer 1

如果您希望使用jQuery，那么这是最简单的解决方案 -

 $("#end_date").datepicker({
    onSelect: function() {
      $(this).change();
    }
  });

  $('#end_date').on('change', function() {
    alert('Element ' + this.name + 'clicked');
  });

https://plnkr.co/edit/jGwZr88ZeHtKPkruAF8u?p=preview

将事件侦听器添加到使用datepicker启动的文本框中

1 个答案: