Question

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

今天约会
今天约会+ 18周
今天约会+ 90周
今天的日期+ 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

试试这个：

$(document).ready(function() {
  $( "#dt0weeks" ).change(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;
  }).change();
});

Answer 2

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

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

另请注意，change事件不会触发输入，直到值已更改和用户将焦点移离输入元素。

Answer 3

使用模糊而不是更改：

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

https://stackoverflow.com/a/9831787/2633917

Answer 4

当我第一次在JSFiddle中加载你的代码时，我收到一个错误，抱怨addWeeks不存在，这意味着更改事件没有附加。然而，在确定改变事件为我解雇后很好。您是否可能遇到同样的问题？

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

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

    now = new Date();
    now.setDate(now.getDate() + 126);
    $("#dt18weeks")[0].valueAsDate = now;

    now = new Date();
    now.setDate(now.getDate() + 630);
    $("#dt90weeks")[0].valueAsDate = now;

    now = new Date();
    now.setDate(now.getDate() + 7);
    $("#dt1weeks")[0].valueAsDate = now;

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

这是我的小提琴 http://jsfiddle.net/ozrevulsion/g3nn1emw/

Answer 5

检查jsfiddle

上的工作副本

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


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

并检查错误的事情。

否则你的代码似乎对我有用。

注意：有一件事可能是错误的：你的更改函数是在创建dom元素之前声明的。

Answer 6

这是在JQuery中工作。

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>

<ul>

JS

function setWeeks(id, amount){
    var tempDate = new Date();
    tempDate.setDate(tempDate.getDate() + (7 * amount));
    $('#'+id).val(tempDate);
};

setWeeks('dt0weeks', 0);
setWeeks('dt18weeks', 18);
setWeeks('dt90weeks', 19);

$( "input[id^='dt']" ).on('change', function() { alert('i clicked on you') });

http://jsfiddle.net/83as8bav/1/

JQ改变不会发生火灾

6 个答案: