Question

我的网站上有一个日期选择器，当我在日期选择器上按下任一箭头时，我正试图显示一条消息。日期选择的左箭头如下：

    <a class="ui-datepicker-prev ui-corner-all" data-handler="prev" data-event="click" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>

但是当我使用这样的javascript时，

    $('.ui-icon ui-icon-circle-triangle-w').click(function(){
        alert('here');
    });

什么都没发生

我错了吗？我该如何解决这个问题？

我修复了这个，

    $('.ui-icon.ui-icon-circle-triangle-w').click(function(){
        alert('here');
    });

现在它只适用于一次点击，点击后的类是

    <a class="ui-datepicker-prev ui-corner-all" data-handler="prev" data-event="click" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>

如何让它适用于该类的所有点击？

我有一个日历点击检查，它适用于所有点击：

    $('#calendar').click(function(){
        console.log(new Date());
    }

但我的箭头只能点击一次

Answer 1

你的.click（）函数不起作用的原因是因为在你想要的选择器存在于DOM之前调用代码，所以不能应用处理程序。

使用（文档）.on（＆＃34;点击＆＃34;，＆＃34; yourSelectorHere＆＃34;，function（）{// do stuff}）;动态创建/编辑的内容。

Answer 2

.click（）分配仅适用于一次的原因是：

每次单击箭头时，都会重新生成DatePicker内容。因此，当您分配.click（）行为时，它会在加载新月份时被删除并重写。

例如，如果您正在查看三月，则上一个箭头设置为加载二月。单击上一个按钮时，将重新加载DatePicker内容以显示二月。该按钮的onclick事件的新行为不再加载二月，它被动态重新分配以加载一月。因此，在月份更改为其他月份后，您为March的按钮编写的一次性按钮.click()分配将被丢弃。

3月份的上一个按钮实际上是一个完全不同于2月份前一个按钮的按钮。

假设DatePicker仅重新分配按钮的onclick事件并且不是从头开始重新创建按钮，则执行以下操作应添加到现有事件侦听器但不会覆盖他们。因此，当覆盖DatePicker onclick事件时，您添加的onclick事件可能会“粘住”。希望DatePicker的编写方式能使其他onclick事件完好无损。

而不是：

 $('.ui-icon.ui-icon-circle-triangle-w').click(function(){
        alert('here');
    });

尝试：

var prev_button = document.querySelector('.ui-icon.ui-icon-circle-triangle-w');

prev_button.addEventListener('click',function(){
   alert('Here');
},false);

在日期选择器上按下箭头

2 个答案: