Events do not work after fired once

Question

I’m doing a CRUD with JS and localStorage. However, when I do an inclusion or an exclusion, when trying to click the buttons for this the events are no longer triggered.

Can you explain to me why?

var tblVariacoes = localStorage.getItem('variacoes');
var indice_selecionado = -1; //Índice do item selecionado na lista
tblVariacoes = JSON.parse(tblVariacoes);
if (tblVariacoes == null) {
  tblVariacoes = [];
}

$("#tbl-variacoes tbody").html("");
$.each(tblVariacoes, function(indice, valor) {
  var cor = JSON.parse(valor);
  $("#tbl-variacoes tbody").append("<tr>");
  $("#tbl-variacoes tbody").append("<td><a href='javascript:' data-index='" + indice + "' class='btn btn-default btnExcluir'>Apagar</a></td>");
  $("#tbl-variacoes tbody").append("<td>" + cor.cor + "</td>");
  $("#tbl-variacoes tbody").append("<td>" + cor.tamanho + "</td>");
  $("#tbl-variacoes tbody").append("<td>" + cor.modelo + "</td>");
  $("#tbl-variacoes tbody").append("<td>" + cor.qtde + "</td>");
  $("#tbl-variacoes tbody").append("</tr>");
});

function CarregaTabela() {
  $("#tbl-variacoes tbody").html("");
  $.each(tblVariacoes, function(indice, valor) {
    var cor = JSON.parse(valor);
    $("#tbl-variacoes tbody").append("<tr>");
    $("#tbl-variacoes tbody").append("<td><span data-index='" + indice + "' class='btn btn-default btnExcluir'>Apagar</span></td>");
    $("#tbl-variacoes tbody").append("<td>" + cor.cor + "</td>");
    $("#tbl-variacoes tbody").append("<td>" + cor.tamanho + "</td>");
    $("#tbl-variacoes tbody").append("<td>" + cor.modelo + "</td>");
    $("#tbl-variacoes tbody").append("<td>" + cor.qtde + "</td>");
    $("#tbl-variacoes tbody").append("</tr>");
  });
}

function Adicionar() {
  var variacao = JSON.stringify({
    cor: $("#slct-cores").val(),
    tamanho: $("#slct-tamanho").val(),
    modelo: $("#slct-modelo").val(),
    qtde: $("#cor-qtde").val()
  });
  //console.log(variacao);
  tblVariacoes.push(variacao);
  localStorage.setItem("variacoes", JSON.stringify(tblVariacoes));
  $(".opt-variacoes").hide();
  $("#slct-cores").val("").removeAttr('disabled');
  $("#slct-tamanho").val("");
  $("#slct-modelo").val("");
  $("#cor-qtde").val("");
  alert("Cor " + $("#slct-cores").val() + " adicionada com sucesso.");

  CarregaTabela();
  return true;
}

function Excluir(indice_selecionado) {
  tblVariacoes.splice(indice_selecionado, 1);
  localStorage.setItem("variacoes", JSON.stringify(tblVariacoes));
  alert("Cor removida com sucesso.");
  CarregaTabela();
}


$(".btnExcluir").click(function() {
  indice_selecionado = parseInt($(this).attr("data-index"));
  Excluir(indice_selecionado);

});

$("#bt-add-cores").click(function() {
  var cor = $("#slct-cores").val();
  $("#slct-cores").attr('disabled', 'disabled');
  $(".opt-variacoes label").html(cor);
  $(".opt-variacoes").show();
});

$("#bt-save-cor").click(function() {
  Adicionar();
});

Answer 1

The jQuery does not scan the whole DOM whenever an event is triggered, by default. So when defining the click event, only the existing elements will have the event linked.

To solve in this case it is possible to use a single event as follows:

$(document).on('click', '.btnExcluir', function() {
  // Código de exclusão
});

This can be translated as "jQuery, look at the document and whenever a click occurs, check if the element matches the specified filter and then let me know".

Answer 2

I had this problem recently. I couldn’t figure out why but I found a way to solve it. What was happening is that when I clicked on the button jQuery was unbind on events, so I did the following. Whenever he clicked, inside the execution function I gave the bind to the event again. Something like this:

function Excluir($obj) {
    indice_selecionado = parseInt($($obj).attr("data-index"));
    tblVariacoes.splice(indice_selecionado, 1);
    localStorage.setItem("variacoes", JSON.stringify(tblVariacoes));
    alert("Cor removida com sucesso.");
    CarregaTabela();
    $($obj)..click(function() {
        Excluir(this);
    });
}

$(".btnExcluir").click(function() {
    Excluir(this);
});

It worked for me. It was an office, but it worked.