jQuery Ajax call on click работает только один раз

Question

Я создаю викторину для веб-сайта клиентов, и я получаю вопросы от вызова Ajax, а затем заменяя содержимое HTML новым вопросом, проблема заключается только в моем вызове Ajax работает один раз, а затем терпит неудачу, если я попробую снова. Когда я заменяю содержимое сразу html(), он терпит неудачу, как бы то ни было, если я разбиваю его на разделы и заменяю do 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-код обработки. Просто обновите необходимые биты.