簡體   English   中英

點擊后將內容附加到div,而無需重新加載頁面

[英]Append content to div on click without page reloading

在我的應用程序中,我有一個對象映射作為關聯數組,這是從JSON獲取的。 這是一張包含問題和每個問題四個答案的地圖。 接下來,我嘗試將一個問題附加到問題div和答案,作為單選按鈕添加到div答案。 沒有任何事情,一切似乎都可以正常運行。 將內容附加到我的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>

我相信這是按鈕點擊傳播。 嘗試這個:

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

供參考,請閱讀有關事件傳播的此鏈接。

您可能在表單中有按鈕。
然后,當您單擊它時,該窗體將頁面發回。
由於發布速度很慢,因此它將首先加載JSON,然后重新加載將完成。

如果您在onclick屬性中定義了函數,則需要添加“ return false;”。

onclick="somefunction(); return false;"

否則, event.stopPropagation()是正確的。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM