ページをリロードせずにクリックするとdivにコンテンツを追加する

Question

私のアプリでは、JSONから取得している結合配列としてのオブジェクトマップがあります。これは質問と各質問に対する4つの回答を含む地図です。次に、私は答えをdivにするためのラジオボタンとしてdivとanswerに質問を追加しようとしています。すべてが1つのことなく完璧に動作しているようです。私のdivsページにコンテンツを追加した後、リロード中です。だから私の質問は、この場合にページの再読み込みを防ぐ方法です。私はajaxコールを使ってみましたが、残念ながら失敗しました。 私のコードは以下のとおりである：

<script> 
    $(document).ready(function(){ 
    var questions = []; 
     $.getJSON("/exam/json", function (result) { 
      var map = {}; 
      var response = result; 
      for (var i = 0, l = response.length; i < l; i++) { 
       map[response[i].id] = response[i]; 
      } 
      $('#nextButton').click(function(){ 
       prepareQuestion(map); 
      }); 
     }); 
    }); 
    function prepareQuestion(questionList){ 
     var actualQuestionIndex = String(Math.floor(Math.random() * Object.keys(questionList).length) + 1); 
     $('#question').append(questionList[actualQuestionIndex].question); 
     if(questionList[actualQuestionIndex].ansc === null){ 
      $('#answers').append("<input type='radio' name='ansa' value='A'>"+questionList[actualQuestionIndex].ansa+"<br>"); 
      $('#answers').append("<input type='radio' name='ansb' value='B'>"+questionList[actualQuestionIndex].ansb+"<br>"); 
     }else{ 
      $('#answers').append("<input type='radio' name='ansa' value='A'>"+questionList[actualQuestionIndex].ansa+"<br>"); 
      $('#answers').append("<input type='radio' name='ansb' value='B'>"+questionList[actualQuestionIndex].ansb+"<br>"); 
      $('#answers').append("<input type='radio' name='ansc' value='C'>"+questionList[actualQuestionIndex].ansc+"<br>"); 
      $('#answers').append("<input type='radio' name='ansd' value='D'>"+questionList[actualQuestionIndex].ansd+"<br>"); 
     } 
     delete map[actualQuestionIndex]; 
    } 
</script> 

Answer 1

私はそれがボタンクリック伝播であると考えています。これを試してください：参照用

$('#nextButton').click(function(event){ 
       event.stopPropagation() 
       prepareQuestion(map); 
}); 

くださいread this link about event propagation.

Answer 2

おそらく形であなたのボタンがあります。
これをクリックすると、フォームがページを戻します。
投稿が遅いため、JSONが最初に読み込まれ、リロードが完了します。

onclick属性で関数を定義した場合は、 "return false;"を追加する必要があります。

onclick="somefunction(); return false;"

そうでない場合は、event.stopPropagation()は正しいです。