jquery - JQ改变不会触发

Question

我有一个 HTML 页面，其中包含 JQ 和一些脚本。我必须在页面加载时显示一些日期，如下所示:

1. 今天日期
2. 今天日期 + 18 周
3. 今天日期 + 90 周
4. 今天日期 + 1 周

我在负载上执行此操作没有问题。

这是 HTML 标记:

<ul>
<li>
   today
</li> 
<li>
    <input type="date" id="dt0weeks">
</li>
<li>
   transfer: today + 18 weeks
</li> 
<li>
    <input type="date" id="dt18weeks">
</li>

<li>
   end date: today + 90 weeks
</li> 
<li>
    <input type="date" id="dt90weeks">
</li>

<li>
   week: today + 1 week
</li> 
<li>
    <input type="date" id="dt1weeks">
</li>   

这是我执行的函数 on ready

$(document).ready(function() {
var now = new Date();

now = new Date();
now.addWeeks(0);
$("#dt0weeks")[0].valueAsDate = now;    

now = new Date();
now.addWeeks(18);
$("#dt18weeks")[0].valueAsDate = now;

now = new Date();
now.addWeeks(90);
$("#dt90weeks")[0].valueAsDate = now;

now = new Date();
now.addWeeks(1);
$("#dt1weeks")[0].valueAsDate = now;

 });

但是我希望现在能够更改 dt18weeks、dt90weeks、dt1weeks 的值，只需单击第一个字段并选择另一个日期，因此在函数中我将对 18、90、1 周求和我刚刚选择的日期。

但是，即使是这个简单的代码也不会触发。

$( "#dt0weeks" )
.change(function () {
alert('i clicked on you');   
})

那在我的 <script> 的顶部标记，不会显示任何警报。

Answer 1

根据您的描述，您的 jQuery 代码应该位于 <script> 中的 document.ready 处理程序中标记在头上。试试这个:

<script type="text/javascript">
    $(function() {
        $("#dt0weeks").change(function () {
            alert('I changed on you');   
        });
    });
</script>

另请注意 change在值已更改并且用户将焦点从输入元素移开之前，事件不会在输入上触发。