I have problem with a function html+jquery

Question

I have this function called by clicking a button:

$("#pulsanteNuovaCategoria").on('click', function(event) {

  event.preventDefault();

  var categoria = new FormData();
  categoria.append("nome", $("#nomeNuovaCategoria").val());
  categoria.append("descrizione", $("#descrizioneNuovaCategoria").val());

  $.ajax({
      url: '../php/model.php?az=nuovaCategoria',
      data: categoria,
      processData: false,
      contentType: false,
      type: 'POST',
      dataType: 'json'
    })
    .done(function(data) {
      $('.archi').append("<div class='accordion' id='accordionExample'><div class='card'><div class='card-header' id='headingOne'><div class='row'><div class='col-1'><h4>" + data.num + "</h4></div><div class='col-8'><h4 class='mb-0'><a href='#' data-toggle='collapse' data-target='#collapse" + data.archivio_id + "' aria-expanded='false' id='nomeCategoria" + data.archivio_id + "' aria-controls='collapseOne'>" + data.archivio_nome + "</a></h4></div><div class='col-1'><h4 class='mb-0'><a href='#' data-id='" + data.archivio_id + "' class='editaCat' data-toggle='modal' data-target='#modaleEditaCategoria' id='editCategoriaGenerale" + data.archivio_id + "'><i data-toggle='tooltip' data-placement='top' title='modifica " + data.archivio_nome + "' class='far fa-edit'></i></a></h4></div><div class='col-1'><h4 class='mb-0'><a href='#' data-id='" + data.archivio_id + "' class='deleteCat' id='deleteCategoriaGenerale" + data.archivio_id + "'><i data-toggle='tooltip' data-placement='top' title='Cancella categoria generale' class='far fa-trash-alt'></i></a></h4></div></div></div><div id='collapse" + data.archivio_id + "' class='collapse' aria-labelledby='headingOne' data-parent='#accordionExample'><div id='descrizioneCategoria" + data.archivio_id + "' class=card-body'>" + data.archivio_descrizione + "</div></div></div></div>");
      $("#nomeNuovaCategoria").val("");
      $("#descrizioneNuovaCategoria").val("");
      $("#modaleNuovaCat").modal('hide');
    })
    .fail(function() {
      alert("Qualcosa è andato storto.");
    });
});

This function create dynamically an entire snippet of html with an edit button completed with data-id, class and id. The important element is class='editaCat'.

Now in the same session, I want to click in this dynamic edit button and call a second function linked with class='editaCat' this:

$(".editaCat").on('click', function(event) {

  event.preventDefault();
  var idCat = this.getAttribute('data-id');

  $.ajax({
      url: '../php/model.php?az=editCategoria&id=' + idCat,
      processData: false,
      contentType: false,
      type: 'POST',
      dataType: 'json'
    })
    .done(function(data) {
      $("#editaNomeCategoria").val(data.archivio_nome);
      $("#editaDescrizioneCategoria").val(data.archivio_descrizione);
      $("#pulsanteEditaCategoria").attr("data-id", data.archivio_id);
    })
    .fail(function() {
      alert("Qualcosa è andato storto.");
    });
});

but it doesn't work.

Help!

score 3 · Accepted Answer · edited Feb 26 '19 at 09:21

3

Try this it will work instead of using directly click event use this for dynamically created html –

$(document).on('click', '.editaCat', function() {
  event.preventDefault();
  var idCat = this.getAttribute('data-id');

  $.ajax({
      url: '../php/model.php?az=editCategoria&id=' + idCat,
      processData: false,
      contentType: false,
      type: 'POST',
      dataType: 'json'
    })
    .done(function(data) {
      $("#editaNomeCategoria").val(data.archivio_nome);
      $("#editaDescrizioneCategoria").val(data.archivio_descrizione);
      $("#pulsanteEditaCategoria").attr("data-id", data.archivio_id);
    })
    .fail(function() {
      alert("Qualcosa è andato storto.");
    });
});

edited Feb 26 '19 at 09:21

H77

5,859
2
26
39

answered Feb 26 '19 at 09:16

chandra shekhar joshi

163
12

try this it will work instead of using directly click event use this for dynamically created html – chandra shekhar joshi Feb 26 '19 at 09:18
Work!!! Great!!you say why? with (document) jquery take all the document?? make a refresh? I don't understand... – Marco Bizzocchi Feb 26 '19 at 09:21
for already existing html the function you have developed will work fine whereas for dynamically created html we need to bind the code with new html which is created so we have to use $(document). which binds the jquery with newly created html :) – chandra shekhar joshi Feb 26 '19 at 09:34
Thank you very much – Marco Bizzocchi Feb 26 '19 at 09:55

I have problem with a function html+jquery

1 Answers1