JQuery Change Class Not Working

Question

Я попытался создать функцию «expand-unexpand», используя JQuery. Когда пользователь нажимает кнопку expand, появляется дочерний элемент div. И когда пользователь нажимает unpend, дочерний элемент div исчезает. Но это не сработает.

Вот мой код:

$(document).ready(function(){ 
$('.expand').click(function(){ 
    var id = $(this).attr('id'); 

    $(this).html("-"); 
    $(this).attr("class", "unexpand"); 

    $.post("classes/ajax_laporan.php", 
      { 
       id: id 
      }, 
      function(data){ 
      } 
    ); 
}); 

$('.unexpand').click(function(){ 
    $(this).html("+"); 
    $(this).attr("class", "expand"); 
}); 
}) 

Есть ли кто-нибудь может помочь мне решить эту проблему? Заранее спасибо.

Answer 1

Я думаю, что вы должны использовать делегирование, как показано ниже, потому что элемент с class=unexpand не существует, когда DOM загружается.

$(document).ready(function() { 

    $(document).on('click', '.expand', function() { 
     var id = $(this).attr('id'); 
     $(this).html("-"); 
     $(this).attr("class", "unexpand"); 
    }); 

    $(document).on('click', '.unexpand', function() { 
     $(this).html("+"); 
     $(this).attr("class", "expand"); 
    }); 
}); 

Fiddle Demo