文章/答案/技术大牛

发布

社区首页 >问答首页 >使用replaceWith时丢失类信息

问使用replaceWith时丢失类信息
EN

Stack Overflow用户

提问于 2014-03-29 07:59:24

回答 2查看 75关注 0票数 0

我正在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并在单击时调用正确/不正确的警报。当单击next按钮时，替换问题(5-8)将出现，但其正确/不正确的单击事件不再起作用。知道吗？

javascript

jquery

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-03-29 08:04:07

替换元素时，删除当前存在的元素，并插入新元素。

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

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

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

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

票数 0

Stack Overflow用户

发布于 2014-03-29 08:04:49

你复制粘贴这个了吗？中漏掉结尾引号

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/22728575

复制

相似问题

问使用replaceWith时丢失类信息
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用replaceWith时丢失类信息EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用replaceWith时丢失类信息
EN