Inhalt an div bei Klick anfügen, ohne dass die Seite neu geladen werden muss

Question

In meiner App habe ich eine Objektkarte als assoziatives Array, die ich von JSON bekomme. Dies ist eine Karte, die Fragen und vier Antworten auf jede Frage enthält. Als nächstes versuche ich eine Frage an div anhängen und beantworte als radio buttons div Antworten. Alles scheint ohne eine Sache perfekt zu funktionieren. Nach dem Anhängen von Inhalt auf meiner divs-Seite wird neu geladen. Meine Frage ist also, wie man in diesem Fall das Nachladen von Seiten verhindert. Ich habe versucht, einen Ajax-Anruf zu verwenden, aber ich habe leider versagt. Mein Code ist unten angegeben:

<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

Ich glaube, es auf die Schaltfläche klicken ausbreitende ist. versuchen Sie dies:

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

Referenz bitte read this link about event propagation.

Answer 2

Sie wahrscheinlich Ihre Schaltfläche in einem Formular haben.
Wenn Sie dann darauf klicken, wird die Seite im Formular zurückgeschrieben.
Da der Post langsam ist, lädt er zuerst den JSON, dann wird der Reload abgeschlossen.

Wenn Sie Ihre Funktion in einem onclick-Attribut definiert haben, müssen Sie "return false;" hinzufügen.

onclick="somefunction(); return false;"

sonst ist event.stopPropagation() Recht.