在自定义行为脚本初始化之前jQuery准备好触发

时间:2012-07-12 21:58:34

标签: javascript jquery internet-explorer javascript-events html-components

背景

我继承了一个古老的Web应用程序,它具有使用老式HTC(HTML组件)脚本定义的自定义行为的输入控件,例如:

<input name="txtFiscalYearEndDay" type="text" value="30" 
    maxlength="2" size="5" id="txtFiscalYearEndDay" class="Text1"       
    style="behavior:url(/path/js/InFocus.htc);" />

以下是此HTC文件的相关部分,用于说明此问题:

<PUBLIC:COMPONENT tagName="InFocus">
<PUBLIC:METHOD NAME="setValid" />
<PUBLIC:ATTACH EVENT="ondocumentready" HANDLER="initialize" />
<SCRIPT LANGUAGE="javascript">

    function initialize() {
        // attaches events and adds CSS classes, nothing fancy
    }        

    function setValid(bInternal) {
        // checks some flags and changes a label
    } 

</SCRIPT>
</PUBLIC:COMPONENT>

所以,到目前为止,没有任何异常。另外,我有一些在DOM-ready上运行的JS:

$(function() {
    txtFiscalYearEndDay_Validate(document.getElementById('txtFiscalYearEndDay'));
});

验证功能:

function txtFiscalYearEndDay_Validate(el) {
    ...
}

注意:我没有使用$('#txtFiscalYearEndDay'),因为我真的无法尝试在元素上调用setValid(true);,我也不想这样做{ {1}}。

问题

在验证函数的某一点上,我试图在元素上调用一个方法,一个由HTC脚本添加的方法:

$('#txtFiscalYearEndDay')[0].setValid(true);

但是,IE调试器很难过,并抱怨el.setValid(true); 不是函数。在调试器中检查它确认了这一点:

setValid()

当然,一旦页面完成渲染(或者实际准备好的文档需要的任何时间段已经过去),验证函数将按预期工作(因为我正在调用对变化和模糊事件也有相同的验证功能)。也就是说,当在jQuery的on-DOM-ready函数之外调用该函数时,它的工作正常。

你们中有谁对这里可能发生的事情有任何想法?在HTC脚本“ondomready”之前,jQuery的“ondomready”是否已经注册?我可以以某种方式改变这个顺序吗?

我目前在所有版本的IE中都看到了这种行为。

编辑:替代方法

我发现了一种解决方法。如果从jQuery ready函数中取出函数调用并将其抛出到页面的末尾,它就可以工作(即:)

typeof el.setValid // "unknown"

2 个答案:

答案 0 :(得分:0)

我不知道HTC是否计入页面准备但我怀疑他们没有。

你可能会尝试在HTC完成之后检查一下只有tru的东西。

你自己的脚本应该开始这样的事情:

function MyFunction() {

 if(!HTCIsreadyTest()) {
    setTimeout(MyFunction, 100);
return;
}

//the rest of your code

}

如果不满足条件,这基本上使您在100毫秒内检查并重启功能,直到测试成功。

如果HTC sciprts在2秒后没有加载,你还可以使用一个计数器参数来增加一次,以便每次尝试都有一些超时代码触发器

答案 1 :(得分:0)

我能找到的最简单的解决方法是将验证函数调用移出jQuery ready()回调并将其移至页面末尾:

...
    <script type="text/javascript">
        txtFiscalYearEndDay_Validate(document.getElementById('txtFiscalYearEndDay'));
    </script>
</body>
</html>

然而,我找到了更优雅的解决方案。因为我似乎需要等待加载所有页面资源,我只需要将函数调用移出jQuery ready()回调,而是将其放在窗口load()回调中:

$(window).load(function() { // instead of $(function() {
    txtFiscalYearEndDay_Validate(document.getElementById('txtFiscalYearEndDay'));
});

我正在使用后者,因此我可以将所有JS代码保存在一起。