E8-怎么监听表单里的日期控件被修改过

起因

业务部门每周六例会，业务部门请假的，如果包含星期六，需要老板审批。

我思路是当开始日期或结束日期被修改时，判断请假日期中是否包括周六，根据是束包含周六，去设置某个控件的值，后续步骤根据这个控件的值去确定流程的走向。

这篇文章记录这个需求中，我解决的第一个问题的过程，怎么知道表单里的时间控件被修改过。

经过

起初，认为这个问题很简单。写个JQUERY不就好了嘛，就像下面这么写。

// 日期控件的修改事件     $("#field9442").change(function(){         alert("开始日期修改事件");     });

 发起流程，填写表单，修改日期时并不弹这个提示框，说明change事件并没有触发。在网上逛了一圈，按网上的说法，又做了一下测试，接下来按我的理解来说一下为什么change事件没有被触发。

change事件会在<input type="text">的控件失去焦点时value的值和获得焦点时value的值相比，如果发生变化了，会触发change事件。

说白了，触发change方法是在失去焦点时触发，并且要满足两个先决条件，一个获得焦点，一个是值发生改变。这就不难理解了，由于E8中用到的日期控件，展示给用户看的是个<span>标签，实际存值的<input>标签是隐藏的，虽然其值发生了变化，但并没有获得焦点和失去焦点的过程，所以并不会触发change事件。

还有小伙伴说，泛微有自己的API，可以按以下的方法写。

WfForm.bindFieldChangeEvent("#field9442", function () { alert("开始日期修改事件2"); })

 有同样想法的小伙伴们请注意，这个方法只适用于E9，至于适不适用E9以上的版本，不确定。但它真的不适用E8，提示"WfForm is not defined"。

最后，我的解决方法是从对应的<span>上想办法。日期控件的DOM结构是这样式儿的。每个控件的组成，有一个<button>按钮，点击之后弹出日期选择框；有一个<span>标签，负责展示信息给用户看；有一个<input>标签，不可见，负责储存、提交数据用。

可以看出来，与控件对应的<span>标签的ID的命名规则是控件名加“span”。

网上找到了这么段代码，给<span>标签的DOMNodeInserted事件绑定方法。

$("#field9442span").bind('DOMNodeInserted',function(e){         alert("444");     });

结果

以上方法能够实现了临听E8工作流的日期控件的方法了，继续去实现后续的功能了。

儿童快乐！