Question

我在javascript中创建一个测验并使用jQuery.replaceWith（）函数将一个div替换为另一个div。替换后文本看起来正确，但点击事件不起作用。似乎新元素不被识别为指定类的成员。

这就是我所拥有的（仅包括相关部分）：

HTML：

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/quiz.js"></script>
</head>
<body>
    <div class="quiz_box grid_12" id="quiz">
        <div class = "question_box">
            <span = "que_span">
                <p class="question">Test Question 1</p>
            </span>
        </div>
        <div class = "answer_box grid_12">
            <span class = "ans_span">
                <p class="correct">Test Answer 1</p>
                <p class="incorrect">Test Answer 2</p>
                <p class="incorrect">Test Answer 3</p>
                <p class="incorrect">Test Answer 4</p>
            </span>
        </div>
        <div class = "response_box grid_12">
                <p class = "response">Test Default Response</p>
        </div>
        <img src="images/next.png" class="quiz_button" id="next_button" />
    </div>
</body>
</html>

quiz.js

var q1Answers=
   '<div class = "answer_box grid_12">
    <p class="correct">Test Answer 5</p>
    <p class="incorrect">Test Answer 6</p>
    <p class="incorrect">Test Answer 7</p>
    <p class="incorrect">Test Answer 8</p>
    </div>';
var current_question = 0;
var questions = [q1, q2, q3, q4, q5, q6, q7, q8, q9, q10, q11, q12];
$(document).ready(function(){
alert("Ready");

$("#next_button").click(function(){
    if(current_question < questions.length){
    $(".question").replaceWith($(questions[current_question]));
    $(".answer_box").replaceWith($(q1Answers));
    current_question +=1;
    }
});

$('.correct').click(function(e){
    alert("correct");
});

$(".incorrect").click(function(){
    alert("incorrect");
});
});

因此，第一个问题（测试问题1-4）被写入html并在单击时调用正确/不正确的警报。点击下一个按钮时会出现替换问题（5-8），但正确/不正确的点击事件不再起作用。任何的想法？

Answer 1

替换元素时，删除当前存在的元素，然后插入一个新元素。

事件处理程序的工作方式是它们绑定到某些元素，而不是选择器本身，它只是一个字符串，因此当删除元素时，绑定事件处理程序也是如此，即使具有相同的新元素也是如此class被插入到它的位置，它不是相同的元素，并且没有相同的事件处理程序。

实际上没有办法将事件处理程序绑定到DOM中不存在的元素，但要解决问题，您可以将事件处理程序委托给未删除的元素

$('#quiz').on('click', '.correct', function(e){
    alert("correct");
});

$('#quiz').on('click', '.incorrect', function(){
    alert("incorrect");
});

Answer 2

你复制粘贴了吗？错过了

中的结束语

var q1Answers='<div class = "answer_box grid_12>

使用replaceWith时丢失类信息

2 个答案: