我正在用这个ajax调用加载一个php页面。第一次效果很好，但我想重新加载（用户可以尝试多个答案）。但是，在第二次加载时，变量 theAnswer 保留第一次尝试的值。
$('body').on("click", "#answer-submit", function() {
var theAnswer = $('#challenge-answer').val();
//alert(theAnswer);
$.ajax({
type: "POST",
url: "ajax/answer.php",
data: { answer : theAnswer },
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0) {
$('#answer').html(msg);
}
}
});
});
这是 HTML
<div id=question-form>
<input type=text name=answer id=challenge-answer class=clue-input /><br />
<button id=answer-submit>GO</button>
</div>
第一次尝试后，是否会将另一个#challenge-answer添加到 DOM 中？ 如果是这样，您的选择器将继续抓住第一个。 在这个例子中，我添加了console.log($('[id="challenge-answer"]'));所以每次点击 GO 后，你都可以查看是否有多个
http://jsfiddle.net/L4h4LLL4/4/
.HTML：
<div id="fiddleBody">
<div id=question-form>
<input type=text name=answer id=challenge-answer class=clue-input /><br />
<button id=answer-submit>GO</button>
</div>
</div>
.JS：
$('#fiddleBody').on("click", "#answer-submit", function() {
console.log($('[id="challenge-answer"]'));
var theAnswer = $('#challenge-answer').val();
alert(theAnswer);
/*
$.ajax({
type: "POST",
url: "ajax/answer.php",
data: { answer : theAnswer },
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0) {
$('#answer').html(msg);
}
}
});
*/
});
我建议您直接在按钮上而不是在正文上应用onclick
。var button = $(#answer-submit);
button.onclick(function(e){
e.preventDefault();
var chanswer= $('#challenge-answer').val();
$.ajax({
type: "POST",
url: "ajax/answer.php",
data: { answer : theAnswer },
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0) {
$('#answer').html(msg);
}
}
});
}）;