DOM изменен, не обновляет событие клика

Question

У меня проблема, получается, что у меня есть система для утверждения и отклонения сообщений, и когда я нажимаю на отклонить, я изменяю класс так, чтобы событие click могло реагировать на него, но кажется, что как только DOM был изменен во время выполнения, я не могу избавиться от старого события click и присоединиться к новому (когда вы меняете классы, происходит событие click). Я пытался "отложить" и "связать", но, как снежный ком, я не знаю ...

<a href="javascript:void(0)" id="{{ $temas->id }}" class="aprobartema text-green-500 hover:text-green-600 hover:underline mr-3">Aprobar</a>

<a href="javascript:void(0)"  id="{{ $temas->id }}"  class="desaprobartema text-yellow-500 hover:text-yellow-600 hover:underline mr-3">Desaprobar</a>

$('.aprobartema').click(function(){
   var id = $(this).attr('id');
   var url = '{{ route("tema.aprobar") }}';
    $.ajax({
    type: 'POST',
    url: url,
    data: 
    {
    "id": id,
     "_token": "{{ csrf_token() }}",
    },
    success: function(response) {
        let i=response.id;
        let nupositivo= parseInt($('#p-'+i).text(), 10);
        //alert(response.id);
       // alert('Tema aprobado');
        $('#'+i).html("Desaprobar");
        $('#'+i).removeClass();
        $('#'+i).addClass('desaprobartema text-yellow-500 hover:text-yellow-600 hover:underline mr-3');
        $('#p-'+i).html(nupositivo+10);


    }

        });
});
     //desaprobar tema
 $('.desaprobartema').click(function(){
   var id = $(this).attr('id');
   var url = '{{ route("tema.desaprobar") }}';
    $.ajax({
    type: 'POST',
    url: url,
    data: 
    {
    "id": id,
     "_token": "{{ csrf_token() }}",
    },
    success: function(response) {
        let i=response.id;
        let nupositivo= parseInt($('#p-'+i).text(), 10);
        //alert(response.id);
       // alert('Tema aprobado');
        $('#'+i).html("Aprobar");
         $('#'+i).removeClass();
        $('#'+i).addClass('aprobartema text-yellow-500 hover:text-yellow-600 hover:underline mr-3');
         $('#p-'+i).html(nupositivo-10);

    }

        });
});

Answer 1

С помощью jQuery вы можете добавить событие к document и использовать on с селектором, чтобы применить его к живым элементам, чтобы вам не приходилось связывать и отменять привязку.

$(document).on('click', '.aprobartema', () => { console.log('Do something') });
$(document).on('click', '.desaprobartema', () => { console.log('Do something else') });

Теперь, когда вы щелкаете, он вызывает соответствующий класс, основанный на классе элемента на момент нажатия.