刷新一個jQuery變量的值

Question

我正在用這個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> 

Answer 1

在第一次嘗試後，另一個#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); 
      } 
     } 
    }); 
    */ 
}); 

Answer 2

我建議你做的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); 
     } 
    } 
}); 

}）;