HTML按鈕不適用於javascript
[英]Html button not working with javascript
問題描述
我在PhyCharm創建了一個簡單的應用程序，在我的static文件夾中有一個.js文件，在我的模板文件夾中有一個index.html文件。
在我的.js文件中，我有這個：
console.log('loaded script.js');
$(document).ready(function () {
$("#submit").on('click', function (event) {
handleClick();
});
});
function handleClick() {
alert("We got here");
$.ajax('/', {
type: 'GET',
data: {
fmt: 'json'
}
});
}
這是index.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="static/script.js"></script>
</head>
<body>
<input type="button" id="submit" value="Get It">
</body>
</html>
應用加載后，控制台中會顯示"loaded script.js" ，但單擊按鈕無效。 我不確定為什么代碼對我來說很好。
3 個解決方案
解決方案1
1 2014-06-09 17:45:09
您需要加載jQuery文件
更新您不應該在<head>標記中加載JavaScript。 您應該將其加載到<body>標簽的底部。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" id="submit" value="Get It">
<script src="static/jQuery.js"></script>
<script src="static/script.js"></script>
</body>
</html>
解決方案2
1 2014-06-09 17:52:02
每個人都給你答案。 這是使用Google的CDN。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="static/script.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"/>
</head>
<body>
<input type="button" id="submit" value="Get It">
</body>
</html>
有關示例，請參考http://jsfiddle.net/hpX3e/ 。
解決方案3
0 2014-06-09 19:25:21
而不是將您的.js文件弄亂...
$(document).ready(function () {
$("#submit").on('click', function (event) {
handleClick();
});
});
為什么不通過簡單地在HTML中調用函數來簡化整個過程。
<input type="button" id="submit" onclick="handleClick()" value="Get it">
HTML和Javascript按鈕不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.