Saya harus membuat tombol secara dinamis dalam fungsi sukses Ajax. Tidak ada jumlah tombol yang tetap dan setiap kali jumlahnya berbeda.

Saya bisa melakukannya, tetapi tidak tahu jumlah pasti elemen yang akan dibuat, saya tidak tahu cara menambahkan jumlah pendengar tombol yang benar.

AJAX:

success : function(data, status, xhr) {
  $("#risultatoLibriCercati").empty();

  var divContent = "";
  for (var i = 0; i < data.length; i++) {
    divContent +=
      "<div class='col-sm-2 mt-4'><a data-toggle='modal' data-target='#bookPage" +
      [i] +
      "'><div class='card shadow-sm'><img style='height:250px' src='" +
      data[i].imgLink +
      "' class='img-thumbnail rounded'></div></a></div><div class='modal fade' id='bookPage" +
      [i] +
      "'><div class='modal-dialog'><div class='modal-content'><div class='modal-header text-center'><h4 class='modal-title w-100 dark-grey-text font-weight-bold'>" +
      data[i].titolo +
      "</h4><button type='button' class='close' data-dismiss='modal' aria-lable='close'>&times;</button></div><div class='mt-4' style='background: url(" +
      data[i].imgLink +
      ") no-repeat;background-size: contain; background-position: center; min-height: 300px;'></div><div class='modal-body mx-4'><div class='md-form'><p class='font-small'>" +
      data[i].autore +
      "</p></div><div class='md-form'><p>" +
      data[i].descrizione +
      "</p></div><div class='text-center mb-3'><button class='btn btn-primary btn-block z-depth-1a' id='aggiungi" +
      [i] +
      "'>Aggiungi a libreria</button><a href='" +
      data[i].isbn13.replace("'", " ") +
      "' target='_blank' style='border:none;text-decoration:none'><img src='https://www.niftybuttons.com/amazon/amazon-button2.png'></a></div></div></div></div></div><input type='hidden' id='categoria" +
      [i] +
      "' value='" +
      data[i].categoria +
      "'><input type='hidden' id='googleID" +
      [i] +
      "' value='" +
      data[i].googleID +
      "'><input type='hidden' id='titolo" +
      [i] +
      "' value='" +
      data[i].titolo.replace("'", " ") +
      "'><input type='hidden' id='descrizione" +
      [i] +
      "' value='" +
      data[i].descrizione.replace("'", " ") +
      "'><input type='hidden' id='autore" +
      [i] +
      "' value='" +
      data[i].autore +
      "'><input type='hidden' id='isbn" +
      [i] +
      "' value='" +
      data[i].isbn13.replace("'", " ") +
      "'><input type='hidden' id='voto" +
      [i] +
      "' value='" +
      data[i].voto +
      "'><input type='hidden' id='imgLink" +
      [i] +
      "' value='" +
      data[i].imgLink +
      "'>";
  }
  $("#risultatoLibriCercati").append(divContent);
}

TOMBOL PADA KLIK PENDENGAR:

$(document).on('click', '#aggiungi0', function(){                            
  var book = {
    googleID: $("#googleID0").val(),
    titolo: $("#titolo0").val(),
    descrizione: $("#descrizione0").val(),
    isbn13: $("#isbn0").val(),
    voto: $("#voto0").val(),
    imgLink: $("#imgLink0").val(),
    autore: $("#autore0").val(),
    categoria: $("#categoria0").val(),
    userId: getCookie("userId"),
  };    
  $.ajax({
[...]
0
Torre106 13 Mei 2021, 12:11

1 menjawab

Jawaban Terbaik

Anda dapat menambahkan atribut class untuk tombol-tombol itu dan melampirkan acara dan indeks untuk mereka seperti di bawah ini

var btnIndex = 0;
$('#add').on('click', function() {
  $('.container').append(`<button class="new-btn" data-index=${btnIndex++}>Button test</button>`);
});

$('.container').on('click', '.new-btn', function(e) {
  console.log("clicked" + $(e.target).data("index"));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Add</button>
<div class="container"></div>

Dan meneruskan nilai-nilai ini dengan indeks ke panggilan ajax seperti ini:

$(document).on('click', '.new-btn', function(e){   
  const idx = $(e.target).data("index");                       
  var book = {
    googleID: $("#googleID" + idx).val(),
    titolo: $("#titolo" + idx).val(),
    descrizione: $("#descrizione" + idx).val(),
    isbn13: $("#isbn" + idx).val(),
    voto: $("#voto" + idx).val(),
    imgLink: $("#imgLink0" + idx).val(),
    autore: $("#autore" + idx).val(),
    categoria: $("#categoria" + idx).val(),
    userId: getCookie("userId"),
  };    
  $.ajax({
[...]
0
NekoMi 13 Mei 2021, 09:43