使用replaceWith时丢失的类信息

我在javascript中创建测验，并使用jQuery.replaceWith（）函数将一个div替换为另一个div。文本看起来正好在替换之后，但点击事件不起作用。它看起来像新的元素不被认为是指定类的成员。使用replaceWith时丢失的类信息

这里是我有（仅包括相关部分）：

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），但是正确/不正确的点击事件不再起作用。任何想法？

来源

2014-03-29 ams264

Aameer - 谢谢你的回复。 $（“。correct”）。click函数不会连接到标签中包含class =“correct”的任何内容吗？ – ams264

karan - 我复制并粘贴成块，所以缺少的引号只是复制/粘贴错误。谢谢。 – ams264

是的，但只有当时de DOM中存在的元素。更好地使用.on（），它能够绑定与选择器匹配的当前和未来元素。查看更多信息：https://api.jquery.com/on/ –

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

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

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

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

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

来源

2014-03-29 08:04:07 adeneo

你是否复制粘贴这个？缺少结束报价

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

来源

2014-03-29 08:04:49 Karan

使用replaceWith时丢失的类信息

回答

相关问题