javascript - JQuery 追加无法正常工作

Question

我正在使用带有 JQuery 的套接字，在套接字的消息调用中，我想在我的 html 页面中附加一个 div，但是一旦加载页面，我就会看到已经附加了一个额外的 div，如何防止它附加页面加载时。

其次，当附加一个 div 时，div 内有一个带有 id=answerit 的按钮，我在其中添加了 onclick 功能。但是当附加 div 并尝试单击答案按钮时，它不会调用 onclick 函数，但是当页面重新加载时它就会起作用

我的代码是

  Student.socket.onmessage = function (message) {
            //alert(message.data);
            $( document ).ready(function() {
            var str = message.data;
            var ques = str.split(":");
            var questionId = ques[0];
            var questionText = ques[1];
            var question = 
                "<div class='span11' style='border:2px solid; border-radius:5px; background-color:#b0c4de;'>"+
                    "<div style='width:30px; float:left;'>" +
                        "<div class='voteup'><a id="+questionId+" vote='true' title='This answer is useful' style='cursor:pointer'>up</a></div>"+
                        "<div class='votedown'><a id="+questionId+" vote='false' title='This answer is not useful' style='cursor:pointer'>down</a></div>"+
                    "</div>"+
                    "<div style='float:left;'>"+
                        "<div style='margin-top:5px' class='span10'>"+
                            "<span>"+questionText+"</span>"+
                            "<button id="+questionId+" style='float:right' class='answerit btn'>Answer It</button>"+
                            "<button id="+questionId+" style='float:right' class='showAnswers btn'>Show Answers</button>"+
                        "</div>"+
                    "</div>"+
                "</div>";
            $('#studentsQuestions').append(question);  
            });
        };

HTML 是

<div id="studentsQuestions"></div>

每次加载页面时，我都会看到一个额外的 div 已经存在，其中包含未定义的文本

谢谢

Answer 1

如果您愿意，可以在附加新内容之前清理 div#studentsQuestions

$("#studentsQuestion").empty().html(question);