jQuery Ajax調用點擊只能工作一次

Question

我正在爲客戶網站構建測驗，我從Ajax調用中獲取問題，然後用新問題替換HTML內容，問題僅在於我的Ajax調用正在工作一次，然後失敗，如果我再試一次。當我用html()一次替換所有內容時，它會失敗，如果我將它拆分爲多個部分，並且替換爲html()，那麼每個部分的工作都沒有問題，但是如果我第一次失敗後一次全部完成，可以看看我的代碼，並告訴我爲什麼會發生這將是非常感謝，提前感謝！

HTML

<section class="widget twelve quiz"> 
    <div class="content"> 
     <div class="widget six sign"> 
      <img src="http://www.mysite.com/images/questions/question-1.jpg" alt=""> 
     </div> 
     <div class="widget six question"> 
      <header> 
       <button class="align-right button" data-object='{"qui_id":"0","action":"1","que_id":"1"}'>Skip</button> 
      </header> 
      <h2>Q: Lorem Ipsum?</h2> 
     </div> 
     <div class="widget twelve answers"> 
      <ul> 
       <li><button data-object='{"ans_id":"1"}'>A: Lorem 1.</button></li> 
       <li><button data-object='{"ans_id":"2"}'>B: Lorem 2.</button></li> 
       <li><button data-object='{"ans_id":"3"}'>C: Lorem 3</button></li> 
       <li><button data-object='{"ans_id":"4"}'>D: Lorem 4.</button></li> 
      </ul> 
     </div> 
     <div class="widget six navigation"> 
      <button class="align-right button" data-object='{"qui_id":"0","action":"0","que_id":"1"}'>Next</button> 
     </div> 
    </div> 
</section> 

AJAX調用只能使用一次

$('.question,.navigation').on('click', '.button', function() { 

    $.ajax({ 
     type: 'POST', 
     url: 'http://www.mysite.com/handler-question.php', 
     dataType: 'json', 
     data: $(this).data('object'), 
     success: function(data) { 

      $('.quiz').html('<div class="content">' 
       + '<div class="widget six sign">' 
        + '<img src="http://www.mysite.com/images/questions/'+data[0].que_file+'" alt="">' 
       + '</div>' 
       + '<div class="widget six question">' 
        + '<header>' 
          + '<button class="align-right button" data-object='+'{"qui_id":"'+data[0].qui_id+'","action":"1","que_id":"'+data[0].que_id+'"}'+'>Skip</button>' 
        + '</header>' 
        + '<h2>Q: '+data[0].que_question+'</h2>' 
       + '</div>' 
       + '<div class="widget twelve answers">' 
        + '<ul>' 
         + '<li><button data-object='+'{"ans_id":"'+data[1].ans_id+'"}'+'>A: '+data[1].ans_answer+'</button></li>' 
         + '<li><button data-object='+'{"ans_id":"'+data[2].ans_id+'"}'+'>B: '+data[2].ans_answer+'</button></li>' 
         + '<li><button data-object='+'{"ans_id":"'+data[3].ans_id+'"}'+'>C: '+data[3].ans_answer+'</button></li>' 
         + '<li><button data-object='+'{"ans_id":"'+data[4].ans_id+'"}'+'>D: '+data[4].ans_answer+'</button></li>' 
        + '</ul>' 
       + '</div>' 
       + '<div class="widget six navigation">' 
        + '<button class="align-right button" data-object='+'{"qui_id":"'+data[0].qui_id+'","action":"0","que_id":"'+data[0].que_id+'"}'+'>Next</button>' 
       + '</div>' 
       + '</div>'); 

     } 
    }); 
}); 

AJAX調用工作沒有問題

$('.question,.navigation').on('click', '.button', function() { 

    $.ajax({ 
     type: 'POST', 
     url: 'http://www.mysite.com/handler-question.php', 
     dataType: 'json', 
     data: $(this).data('object'), 
     success: function(data) { 

      $('.sign').html('<img src="http://www.mysite.com/images/questions/'+data[0].que_file+'" alt="">'); 

      $('.question').html('<header>' 
       + '<button class="align-right button" data-object='+'{"qui_id":"'+data[0].qui_id+'","action":"1","que_id":"'+data[0].que_id+'"}'+'>Skip</button>' 
       + '</header>' 
       + '<h2>Q: '+data[0].que_question+'</h2>'); 

      $('.answers').html('<ul>' 
       + '<li><button data-object='+'{"ans_id":"'+data[1].ans_id+'"}'+'>A: '+data[1].ans_answer+'</button></li>' 
       + '<li><button data-object='+'{"ans_id":"'+data[2].ans_id+'"}'+'>B: '+data[2].ans_answer+'</button></li>' 
       + '<li><button data-object='+'{"ans_id":"'+data[3].ans_id+'"}'+'>C: '+data[3].ans_answer+'</button></li>' 
       + '<li><button data-object='+'{"ans_id":"'+data[4].ans_id+'"}'+'>D: '+data[4].ans_answer+'</button></li>' 
       + '</ul>'); 

       $('.navigation').html('<button class="align-right button" data-object='+'{"qui_id":"'+data[0].qui_id+'","action":"0","que_id":"'+data[0].que_id+'"}'+'>Next</button>'); 

     } 
    }); 
}); 

Answer 1

如果用html()代替內容，則附加到元素的所有事件偵聽器都會丟失，即使您再次重新創建相同的標記。事實上，聽衆仍然在記憶中，並且使瀏覽器的RAM消耗變得混亂，但這是一個不同的故事。

你有兩種可能性：

1. 重新創建事件偵聽器，一旦你替換HTML內容。因此，您應該將整個點擊偵聽器回調分配給一個變量。但這不是最可維護和優雅的解決方案。

2. 如果可能，不要銷燬仍將使用的元素。相反，只需修改已更改的元素（如在第二個示例中）。這樣你甚至可以使用一些突出顯示的動畫來通知用戶更新。

另外，我第二個什麼net.uk.sweet在評論部分說：生成HTML應該從你的ajax JavaScript處理分開。只需更新必要的位。