Изменение атрибутов динамически с помощью JQuery

Question

Вот часть из HTML страницы:

<div class="ajax-load"> 

</div> 

<button id="next" class="load-page-2"> 

А вот javascript:

$(".load-page2").click(function() { 
    $(".ajax-load").load("3.php"); 
    $.get('4.php', function(data) { 
     $('.ajax-load').append(data); 
      $.get('5.php', function(data){ 
       $('.ajax-load').append(data); 
      }); 
     }); 

    // Now I need to change the class of the #next button 

    $("#next").removeClass("load-page2"); 
    $("#next").addClass("load-page3"); 
}); // End click function 



//Now different functionality for the same button but with class "load-page3" 

$(".load-page3").click(function(){ 
    // load 6.php 7.php 8.php 
}); 

Но это не работает. Похоже, что кнопка все еще имеет "load-page2" class и, следовательно, загружает 3.php 4.php and 5.php

Answer 1

Поскольку вы имеете дело с динамическими свойствами необходимы использовать событие делегации

$(document).on('click', '.load-page2', function(){ 
    //you code 
}) 
$(document).on('click', '.load-page3', function(){ 
    //you code 
}) 

При добавлении нормальных обработчиков событий, те прикрепляются к элементам, которые соответствует селекторам во время выполнения кода, любые изменения, внесенные в атрибуты элемента после этого, не будут влиять на зарегистрированные обработчики.