jquery script works only one time

Viewed 63

I need your help please. I have this jquery script that works but only one time. The second time it doesn't work until i refresh the page. To be more accurate, the second time "it works" until it reaches the second alert. The second time it doesn't fire up the modal. Before posting I googled for an answer and from what I understood it is related to bind method. i tried to figure out what's going on before asking for help but I wasn't able to figure it out by myself.

This is the html page:

<div class="container bkoffice-n-immobile bg-light">

  <div class='row' id='rw-master'>

    <div class='col-md-12'>
      <div class='row p-4'>
        <div class='col-md-2 col-thumbnail'>
          <div class='card'>
            <img class='card-img-top' src='../' alt= '' >
          </div>
        </div>
        <div class='col-md-8 p-2 col-img'>
          <p><b>Rif.:</b><span class='ps-5'>b 12</span></p>
          <p><b>Tipologia:</b><span class='ps-2'>monolocale</span></p>
          <p><b>Indirizzo:</b><span class='ps-2'></span></p>
          <p><b>Prezzo:</b><span class='ps-4'>€ 0</span></p>
          <div class='row rw-img'>
            <div class='col-md-12'>
              <i class='fas fa-eye' title='visualizzazioni'></i>
              <span class='p-2'>0</span>
              <a href='m-immobile.php?id=194'class='mod-imm' rel='194'><i class='fas fa-edit icon' title='modifica'></i></a>
              <a href='#' class='del-imm' rel='194'><i class='fas fa-trash icon' title='cancella'></i></a>
            </div>
            <div class='form-check form-switch mt-2'>
              <input class='form-check-input chkvisibile' type='checkbox' value='1' rel='194'>
              <label class='form-check-label'>Ann. Visibile</label>
            </div>

            <div class='form-check form-switch'>
              <input class='form-check-input chkpagina' type='checkbox' value='1' rel='194'>
              <label class='form-check-label'>Ann. Prima Pagina</label>
            </div>
          </div>
        </div>
      </div>
      <div class='col-md-12'>
        <div class='row p-4'>
          <div class='col-md-2 col-thumbnail'>
            <div class='card'><img class='card-img-top' src='../' alt= '' ></div>
          </div>
          <div class='col-md-8 p-2 col-img'>
            <p><b>Rif.:</b><span class='ps-5'>b 800</span></p>
            <p><b>Tipologia:</b><span class='ps-2'>monolocale</span></p>
            <p><b>Indirizzo:</b><span class='ps-2'></span></p>
            <p><b>Prezzo:</b><span class='ps-4'>€ 0</span></p>
            <div class='row rw-img'>
              <div class='col-md-12'>
                <i class='fas fa-eye' title='visualizzazioni'></i>
                <span class='p-2'>0</span>
                <a href='m-immobile.php?id=193'class='mod-imm' rel='193'><i class='fas fa-edit icon' title='modifica'></i></a>
                <a href='#' class='del-imm' rel='193'><i class='fas fa-trash icon' title='cancella'></i></a>
              </div>
              <div class='form-check form-switch mt-2'>
                <input class='form-check-input chkvisibile' type='checkbox' value='1' rel='193'>
                <label class='form-check-label'>Ann. Visibile</label>
              </div>
              <div class='form-check form-switch'>
                <input class='form-check-input chkpagina' type='checkbox' value='1' rel='193'>
                <label class='form-check-label'>Ann. Prima Pagina</label>
              </div>
            </div>
          </div>
        </div> 
      </div>
    </div>

    <!-- MODAL START HERE -->

        <div class="modal fade" tabindex="-1" role="dialog" id="mdl-avviso-imm">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title"><b><u>Progetto Casa</u></b></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                Sicuro di voler cancellare questo immobile?, l'operazione è irreversibile!!!
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="del-btn-imm" data-bs-dismiss="modal">Cancella</button>
                <button type="button" class="btn btn-success btn-bg-v" id="dismiss" data-bs-dismiss="modal">Annulla</button>
              </div>
            </div>
          </div>
        </div>

   <!-- MODAL END HERE -->

this is the jquery script:

  $(document).ready(function(){
    $(document).unbind('click').on('click', '.del-imm', function(e) {
      e.preventDefault();
      console.log("click");
      var id = $(this).closest(".del-imm").attr('rel');
      data_1 = 'id=' + id;
      alert(id);
      alert(data_1);
      $('#mdl-avviso-imm').modal('show');
      $('#del-btn-imm').on('click', function(e){
          e.preventDefault();       
          $.ajax({
            url: 'php/del-imm-new.php',
            type: 'post',
            data: data_1,
            cache: false,
            success: function(html){
              $('#rw-master').html("");
              $('#rw-master').html(html);
            }
          });
      });
    });
  });
0 Answers
Related