将点击事件连接到 MooTools 中的按钮时遇到问题

发布于 2024-12-09 15:40:05 字数 1498 浏览 0 评论 0原文

我刚刚下载了 MooTools 1.4。我在将按钮单击连接到 AJAX 请求的启动时遇到问题。在我的下面的页面中,我有一个 id="submit" 的按钮,但是单击该按钮不会触发警报...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test</title>
<script type="text/javascript" src="js/mootools-core-1.4.1-full-compat.js"></script>
<script type="text/javascript">
    /* ajax alert */
    $('submit').addEvent('click', function(event) {
        alert("hello");
        var filename = $('filename').value;
        //prevent the page from changing
        event.stop();
        //make the ajax call
        var req = new Request({
            method: 'get',
            url: '/renderhtml/' + filename,
            data: { },
            onRequest: function() { 
            // on request
        },
        onComplete: function(response) { 
            $('content').set('html',response);
        }
        }).send();
    }); 
</script>
</head>
<body>

    <div>
        <form name="f">
            File name: <input type="text" size="25" id="filename" name="filename" value="" />
            <input type="button" id="submit" name="submit" value="Submit" />
        </form>
    </div>
    <div id="content"></div>

</body>
</html>

我已经确认 mootools 源文件位于正确的位置。我还缺少什么?谢谢,-戴夫

I just downloaded MooTools 1.4. I'm having trouble connecting a button click to the launching of an AJAX request. In my page below, I have a button with id="submit", but clicking the button doesn't trigger the alert ...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test</title>
<script type="text/javascript" src="js/mootools-core-1.4.1-full-compat.js"></script>
<script type="text/javascript">
    /* ajax alert */
    $('submit').addEvent('click', function(event) {
        alert("hello");
        var filename = $('filename').value;
        //prevent the page from changing
        event.stop();
        //make the ajax call
        var req = new Request({
            method: 'get',
            url: '/renderhtml/' + filename,
            data: { },
            onRequest: function() { 
            // on request
        },
        onComplete: function(response) { 
            $('content').set('html',response);
        }
        }).send();
    }); 
</script>
</head>
<body>

    <div>
        <form name="f">
            File name: <input type="text" size="25" id="filename" name="filename" value="" />
            <input type="button" id="submit" name="submit" value="Submit" />
        </form>
    </div>
    <div id="content"></div>

</body>
</html>

I have confirmed the mootools source file is in the right place. What else am I missing? Thanks, - Dave

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

倒数 2024-12-16 15:40:05

您应该在窗口上使用 domready 事件,或者将脚本标记放在 HTML 中的按钮下方。 (最好是一直到正文)

您试图在页面仍在加载时访问带有 id 提交的按钮,因此该按钮尚不存在。但是,当您在 domready 或 load 事件上执行代码时,您可以确定整个页面已加载并且可以完成 dom 操作。

window.addEvent('domready', function() {
  // Your code
});

^ 在执行任何操作之前等待页面加载。

You should use the domready event on the window, or place the script tag below the button in the HTML. (preferably all the way down the body)

You're trying to access the button with id submit while the page is still loading, so the button doesn't exist yet. However, when you execute the code on the domready or maybe load event, you can be sure that the whole page is loaded and dom manipulation can be done.

window.addEvent('domready', function() {
  // Your code
});

^ waits for the page to load before it does anything.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文