繁体   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