DOM更改后不会更新单击事件

Question

我遇到了一个问题，原来我有一个系统来批准和不批准帖子，当我点击不批准时，我会更改类，以便点击事件可以对此做出反应，但似乎一旦在运行时更改了DOM，我就无法摆脱旧的事件点击并加入新的事件(当你更改类时，会有一个点击事件(。我试过"解除绑定"one_answers"绑定"，但就像滚雪球一样，我不知道。。。

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

现在，无论何时单击，它都会根据单击时元素的类调用相应的类。