Question

我通过单击一个按钮来调用此功能：

$("#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.");
    });
});

此函数动态创建一个完整的html代码段，并带有一个由data-id，class和id组成的编辑按钮。重要元素是class='editaCat'。

现在在同一会话中，我想单击此动态编辑按钮并调用与此class='editaCat'链接的第二个函数：

$(".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.");
    });
});

但它不起作用。

帮助！

Answer 1

尝试使用此方法，而不是使用直接单击事件，将其用于动态创建的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.");
    });
});

我在使用html + jquery函数时遇到问题

1 个答案: