2011-10-11 57 views
1

我刚刚下载了MooTools 1.4。将按钮点击连接到启动AJAX请求时遇到问题。在下面我的网页,我有ID的按钮=“提交”,但点击按钮不会触发警报...将点击事件连接到MooTools中的按钮时出错

<!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的源文件是在正确的地方。我还有什么遗漏?谢谢, - Dave

+0

复活就在这里。该代码否则工作正常:'http:// jsfiddle.net/hWhES /'。尝试使用诸如firefox的firebug等Web开发工具来寻找解决方案,以帮助您在未来找到解决这类问题的解决方案。 – Oliver

回答

2

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

你试图访问与ID按钮提交,而页面仍在加载,使按键尚不存在。但是,当你在domready上执行代码或者加载事件时,你可以确定整个页面被加载并且可以完成dom操作。

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

^等待页面加载之后,它执行任何操作。