⽇期控件的值改变时触发事件问题
在 input 中添加⼀个⽇期控件，想⽇期改变的时候触发某个事件。⼀般来讲，下意识的就给那个 input 动态绑定了 change 事件，由于我使⽤的 jquery-1.4.4 所以是使⽤的live绑定。减缩代码如下：
<!--cdr.show(this)就是显⽰出⽇期控件-->
<input type="text" id="date" onFocus="cdr.show(this)" readonly />
<script type="text/javascript">
$("#date").live("change",function(){
alert("yes");
//
});
</script>
绑定change后发现⽆效，我使⽤的是 firefox 和 chrome 。仔细检查没有拼写错误后，我将 change 事件改为 click 试试，发现可以弹出窗⼝，那就说明是change这个事件的原因。
google后，⽹上⼤部分说的是这种情况⼀般出现在低版本IE上，⽽且 jquery live ⽅法效率很低，在1.9版本后已经被抛弃了。为了解决这个问题，开始了⼏个⼩时的debug之旅。
⾸先我使⽤了 jquery 1.11 替换了1.4，并将 live 全部换成的 on (这个页⾯不全是我写的)，确定替换之后没有其他兼容问题后发现 on ⽅法还是⽆法触发 change 事件
然后⼜使⽤ delegate 试试，不⾏。
⼜使⽤ bind 试试，还是不⾏。
搜索之后发现还有 onpropertychange (IE专⽤)，和 oninput (⾮IE)事件可以监听input值的改变，试过oninput之后不⾏，因为脚本修改的值不能触发oninput事件。
将change改为 click/blur 之类的都可以正常触发
查change事件原理，发现change事件其实就是在元素获得焦点的时候，保存当前值，失去焦点的时候，会将当前值和原来保存起来的值进⾏⽐较，如果不同，则触发change事件。
结论: 在绑定了⽇期控件之后绑定change事件，其实⽂本框的值是⼀直没有改变的，所以不会触发。
测试：onFocus事件去掉，change事件就会正常触发。
<input type="text" id="date" onFocus="cdr.show(this)" readonly />
blur事件<script type="text/javascript">
<!--以下是绑定change的时候的⼀些测试，都没有正常触发change事件
<!-- jquery-1.4.4版本 -->
$("#date").live("change",function(){
alert("yes");
//
});
<!-- jquery-1.11.1版本-->
$("#date").on("change",function(){
alert("yes");
//
});
<!-- jquery-1.11.1和1.4.4-->
$("body").delegate("#date","change",function(){
alert("yes");
//
});
<!-- jquery-1.11.1和1.4.4-->
$("#date").bind("change",function(){
alert("yes");
//
});
</script>
解决办法：
再去想办法绑定change事件已经不符合实际情况了，于是想着是出现⽇期，选择⽇期后执⾏我的my_function。
于是就去看了⽇期控件的源码，发现最后其实是点击⽇期后，就会将点击的⽇期值赋值给⽂本框，然后关闭控件。
由于我只想对这⼀个⽂本框执⾏my_function⽅法，所以给⽇期控件对象新增加了⼀个属性unblur，让它在关闭控件之前触发。
然后在⽂本框触发focus事件时，显⽰控件，并且将我的my_function绑定给unblur
最后，在⽇期控件关闭后，就会触发my_function
⼼得：基础是⼗分的重要的！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。