Question

我刚刚下载了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源文件位于正确的位置。我还缺少什么？谢谢， - 戴夫

Answer 1

您应该在窗口上使用domready事件，或者将脚本标记放在HTML中的按钮下方。（最好一直沿着身体）

您正在尝试在页面仍在加载时访问ID为“提交”的按钮，因此该按钮尚不存在。但是，当您在domready或者load事件上执行代码时，您可以确保加载整个页面并完成dom操作。

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

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

无法将点击事件连接到MooTools中的按钮

1 个答案: