Question

我的网页上有一个<input>字段，我想在其上添加一个特定的方法，比如fooBar()。

以下是我的工作：

<input id="xxx" .../>
<script type="text/javascript">
    $("xxx").fooBar = function() { ... };
</script>

这很有效。但是，由于某些原因，我不会在这里详述（实际上HTML是由JSF组件生成的），<script>将在<{strong> <input>标记之前声明为。

所以换句话说，我会在我的HTML中有这个：

<script type="text/javascript"> $("xxx").fooBar = function() { ... }; </script> <input id="xxx" .../>

当然，这段代码无法正常运行，因为脚本会尝试获取（$("xxx")）并修改一个尚不存在的元素。

如果我想坚持这两个标签的确切顺序，那么实现我想要的最佳方式是什么？

修改

就我而言，$指的是原型，但我也在我的应用程序中使用jQuery。我必须与IE6兼容：o（

Answer 1

您需要在加载文档后运行脚本。使用jQuery，您可以使用：

$(document).ready(function () {
    //do stuff here
});

我不知道你在这里使用的是哪个库，但它们都准备好了jQuery的文档。

这是等效的原型：

document.observe("dom:loaded", function() {
  // do stuff
});

Answer 2

尝试将您的代码放入load事件：

$(window).load(function(){
  $("#xxx").fooBar = function() { ... };
});

Answer 3

如果代码必须直接在输入之前，您可以检查它是否在一段时间后加载。

<script type="text/javascript">
    //Sets up a function to execute once the input is loaded
    f = function () 
        {
        //Checks if 'xxx' exists (may vary between frameworks)
        if ($("xxx") !== undefined) 
            {
            $("xxx").fooBar = function() { ... };
            //Escapes the timer function, preventing it from running again
            return true;
            }
        //If still not loaded check again in half a second (0.5s or 500ms)
        setTimeout(f,500);
        return false;
        }
    f();//Initialize the timer function
</script>
<input id="xxx" .../>

Answer 4

不是将方法添加到dom节点，为什么不将它作为一个单独的函数，而不是

$("xxx").fooBar = function() {
  doStuff(this); 
};

你会有像

这样的东西

function xxx_fooBar () {
  var me = document.getElementById('xxx');
  doStuff(me);
};

另一个建议：如果你可以为<input>元素添加属性，你可以这样做......

<script>
function xxx_init (e) {
  e.fooBar = function () {
    doStuff(this); 
  };
} 
</script>
<input onload="xxx_init(this)" id="xxx" .../>

或者你可以像其他人一样建议并将脚本附加到window.onload事件。

修改尚未创建的元素的最佳方法

4 个答案: