前端页面突然需要在选择时间后自动获取所选时间内的设备信息,我立刻写了一个change()方法,测试时发现没有触发
原因是:change事件其实就是在元素获得焦点的时候,保存当前值,失去焦点的时候,会将当前值和原来保存起来的值进行比较,如果不同,则触发change事件。
而 在绑定了日期控件之后绑定change事件,其实文本框的值是一直没有改变的,所以不会触发。
查询资料时有些网友说改日期控件,在日期控件触发确定按钮时调用自己写的自定义函数即可
我这就不修改日期控件,使用以下方法即可:
HTML:
<input name="startTime" id="startTime" type="text" readOnly="true"
class="Wdate form-control"
onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'});javascript:{$('#startTime').trigger('change')}" >
onfocus事件不会触发自定义的change事件,如果我们想要触发change事件实现自己想要预定的功能,可以在原来定义日期控件的html的代码后面直接再次的调用手动触发change事件
JS:
$("#startTime").bind("change",function(){
var flag = false;
var startTime = Page.$("#startTime").val();
if(startTimes!=startTime){
startTimes=startTime;
flag=true;
}
var endTime = Page.$("#endTime").val();
if(flag){
Page.loadSelect({
target : Page.$("#deviceName"),
textField : "text",
data : {"xxxx":xxxx,"startTime":startTime,"endTime":endTime},
url : "xxx/xxx"
});
}
});
这里的flag是因为我发现如果不设置时间值比较的话,点击日期时间就会发请求,点确认日期按钮也会发请求,我只需要发一次请求即可,startTimes是一个全局变量。