Events do not work after being fired once

Question

Events do not work after being fired once

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

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

Can you explain 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();
});

javascript jquery

asked by anonymous 11.10.2016 / 03:20

2 answers

1

I've had this problem recently. I could not figure out why but found a way to solve it. What was happening is that when I clicked the button jQuery unbinded the events, so I did the following. Whenever it clicked, within the execution function I would bind in 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 a gabiarra, but it worked.

12.10.2016 / 17:23

How to add AsyncTask to this task? Generate report on Azure

score 2 · Accepted Answer

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

To resolve in this case you can use a single event as follows:

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

This can be translated as "jQuery, look at me the document and every time a click occurs, it checks to see if the element matches the specified filter and then let me know".