使用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時丟失的類信息

回答

相關問題