DOM changed does not update click event

Question

I have a problem, it turns out that I have a system to approve and disapprove posts, and when I click on disapprove, I change the class so that the click event can react to it, but it seems that once the DOM has been changed at runtime, I can't get rid of the old event click and join the new one (when you change classes, there is a click event). I have tried "unbind" and "bind" but like a snowball, I don't know...

<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);

    }

        });
});

Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — showdev, Mar 30 '20 at 20:26

score 0 · Accepted Answer · answered Mar 30 '20 at 19:48

0

With jQuery, you can add an event to document and use on with a selector to have it apply to elements live, so you won't have to bind and unbind.

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

Now, whenever you click, it will call the appropriate one based on the class of the element at the time of clicking.

answered Mar 30 '20 at 19:48

samanime

25,408
15
90
139

Excellent. Only one thing, now it is difficult for me to get the id of the item to approve since I no longer have the selector when doing $ (this) – Fiorella Gamarra Aguado Mar 30 '20 at 20:03
var id = $(event.target).attr('id'); With that I got where the click came from, thanks for everything. – Mar 30 '20 at 20:13
If you switch it to a normal function (`function() {}`) instead of a lambda/arrow function (`() => {}), `this` will also be the element in jQuery. Though I prefer getting it from the event target personally. – samanime Mar 30 '20 at 20:16

DOM changed does not update click event

1 Answers1