我的 html 和 javascript 如下。当单击 ID 为“switch”和“next”的输入按钮时，处理程序未运行，因此未检测到单击，但我不明白为什么。任何帮助将不胜感激!
谢谢。
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv:"Content-Type" content="text/html; charset=ISO-8859-1" />
<script text="text/Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/Javascript" src="jquery.js"> </script>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="jquery_home.css">
<title> jquery home </title>
</head>
<body>
<div id="container">
<h1 style="position: relative; top: 10%; width: 300px; margin-left: auto; margin-right: auto"> Learn jQuery </h1>
<div id="q_and_a_container" style="text-align: center">
<div style="width: 200px; margin-left: auto; margin-right: auto; text-align: center" id="qa"> Nate Hill</div>
<input type="submit" id="switch" value="See Answer" />
<input type="submit" id="next" value="Next Question" />
</div>
<div id="answer_container">
<textarea id="answer_here"> </textarea>
</div>
</div>
<div id="another_container" style="width: 300px; margin-left: auto; margin-right: auto; text-align: center">
<h2 style="font-family: 'Chalk'">
<a href="add_question.html">Add question </a> </h2>
</div>
</body>
</html>
Javascript
$(document).ready(function() {
var question_number = 1;
var tempText;
var qno;
$(document).on("click", "#switch", function(event) {
console.log("clicked");
if ($("#switch").val() == "See Answer") {
tempText = $("#qa").text();
$("#qa").text("");
qno = "" + question_number;
qno = "#" + qno;
$.ajax({
url: "answers.html",
datatype: "html",
success: function(data) {
$("#qa").html($(data).filter(qno).text());
},
error: function(r) {
alert("whoops, error in ajax request");
}
}); // end AJAX request
// change value
$("#switch").val("See Question");
} else {
temptText = $("#qa").text();
$("#qa").text("");
qno = "" + question_number;
qno = "#" + qno;
$("#qa").text(tempText);
$("#switch").val("See Answer");
}
});
$(document).on("click", "#next", function(event) {
question_number = question_number + 1;
qno = "" + question_number;
qno = "#" + qno;
$.ajax({
url: "questions.html",
datatype: "html",
success: function(data) {
$("#qa").text($(data).filter(qno).text());
},
error: function(r) {
alert("whoops, error in ajax request for next question");
}
}); // end AJAX request
});
$("textarea").keydown(function(e) {
if(e.keyCode === 9) { // tab was pressed
// get caret position/selection
var start = this.selectionStart;
var end = this.selectionEnd;
var $this = $(this);
var value = $this.val();
// set textarea value to: text before caret + tab + text after caret
$this.val(value.substring(0, start)
+ "\t"
+ value.substring(end));
// put caret at right position again (add one for the tab)
this.selectionStart = this.selectionEnd = start + 1;
// prevent the focus lose
e.preventDefault();
}
});
})
最佳答案
删除以下任一 jquery 库引用。我认为jquery发生了冲突。
<script text="text/Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/Javascript" src="jquery.js"> </script>
关于javascript - 输入类型=提交在 div 内时不触发？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29618623/