Question

我正在学习原型框架和javascript，并且正在重构一些现有代码，使用事件监听器从类内部的数据创建一些html。我遇到了触发事件并使相应的侦听器代码工作的问题。这是一个小例子，我无法工作：

<html>
<head>
    <title>Event Test</title>
    <script type="text/javascript" src="prototype.js"></script>

    <script type="text/javascript">
        MyClass = Class.create({
            initialize: function(args) {
                this.div_id = $(args['div_id']);
            },
            test: function() {
                this.div_id.fire('ag:test');
            }
        });

        var myclass = new MyClass({div_id:'test'});

        $('test').observe(myclass, 'ag:test', function(evt){
            $('test').insert('<p>Test</p>');
        });


        myclass.test();
    </script>
</head>

<body>
    <div id="test">
    </div>
</body>

我的意图是我只想在实例化类时向div添加一些html，或者在类上调用其他方法时。现在这段代码没有做任何事情。使用firebug，似乎我的类永远不会在这里实例化。我一直在看例子和原型文档，但无法弄清楚我做错了什么。

谢谢！

编辑：在类构造函数中更改为不触发事件。

Answer 1

你听#test div的ag：test事件，但在类上激活事件，所以没有任何反应是很正常的。你应该听你正在创建的类的事件，但是你不能捕捉到即时事件，因为你不能在类即时之前附加事件处理程序。所以你必须找到另一种方式。

Answer 2

知道了！这是延迟加载的问题。在原始问题中，我在标题中定义了所有javascript。它失败了，因为当我使用$（'test'）时，元素还不存在。正确的代码是：

<html>
<head>
    <title>Event Test</title>
    <script type="text/javascript" src="prototype.js"></script>

    <script type="text/javascript">
        MyClass = Class.create({
            initialize: function(args) {
                this.div_id = $(args['div_id']);
            },
            test: function() {
                this.div_id.fire('ag:test');
            }
        });


    </script>
</head>

<body>
    <div id="test">
    </div>

    <script type="text/javascript">
        var myclass = new MyClass({div_id:'test'});

        $('test').observe('ag:test', function(evt){
            $('test').insert('<p>Test</p>');
        });


        myclass.test();
    </script>
</body>

prototypejs事件侦听器和触发事件的问题

2 个答案: