javascript - JQuery 更改类不起作用

Question

我尝试使用 JQuery 创建“扩展-未扩展”函数。当用户单击展开时，会出现 div 的子项。当用户单击展开时，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

我认为您必须像下面这样使用委托(delegate)，因为加载 DOM 时不存在带有 class=unexpand 的元素。

$(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