将点击事件连接到 MooTools 中的按钮时遇到问题
我刚刚下载了 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技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您应该在窗口上使用 domready 事件,或者将脚本标记放在 HTML 中的按钮下方。 (最好是一直到正文)
您试图在页面仍在加载时访问带有 id 提交的按钮,因此该按钮尚不存在。但是,当您在 domready 或 load 事件上执行代码时,您可以确定整个页面已加载并且可以完成 dom 操作。
^ 在执行任何操作之前等待页面加载。
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.
^ waits for the page to load before it does anything.