Prototypejs观察函数抛出错误答案

【问题标题】：Prototypejs observe function throws errorPrototypejs观察函数抛出错误
【发布时间】：2012-06-22 09:42:19
【问题描述】：

我有这行代码，但它会引发错误。代码有什么问题？

<html>
    <head>
        <script src="http://prototypejs.org/javascripts/prototype.js" type="text/javascript"></script>
        <script type="text/javascript">

            Event.observe('target', 'click', function(event) {
                // ...
            });

        </script>   
    </head>
    <body>
        <p id='target'>Click me!</p>
    </body>
</html>

【问题讨论】：

试试我发布的答案。效果很好！

标签： javascript prototypejs

【解决方案1】：

在你之后加载脚本

标签已加载。这样您就不需要检测 dom:loaded 事件。 :)

<html>
    <head>
        <script src="http://prototypejs.org/javascripts/prototype.js" type="text/javascript"></script>

    </head>
    <body>
        <p id='target'>Click me!</p>
          <script type="text/javascript">

                Event.observe('target', 'click', function(event) {
                    alert('clicked me');
                });

            </script>
    </body>
</html>

【讨论】：

如果解决方案对您有所帮助，实际上投票并不是一个坏主意:)

【解决方案2】：

在执行代码时，您尝试将事件处理程序绑定到的元素在 DOM 中不存在。将其包装在 DOM 就绪事件处理程序中：

document.observe("dom:loaded", function() {
    Event.observe('target', 'click', function(event) {
        // ...
    });
});

Prototype docs中提到了这个：

试图观察事件的最常见错误之一是试图做它在元素存在于 DOM 之前。不要试图观察元素直到 dom:loaded 事件或窗口加载事件被触发。

【讨论】：

@user1077300 - 你能在jsfiddle.net上举个例子吗？你得到了什么错误？
Jsfiddle.net 可能不适合测试，因为它不需要 dom:loaded 事件，因为它在 html 之后加载脚本！
@EswarRajeshPinapala - 您必须将包含点设置为“不换行（头部）”。然后它将 JS 包含在 OP 在问题中所做的相同位置。
@JamesAllardice，啊，很高兴知道。顺便说一句，最好在页面底部加载脚本以使其正常工作！（在某种程度上它仍在等待 dom:load 。）