modal opens many times

Question

modal opens many times

Navigation

#1 by (1 votes)

1

When I open my modal it opens an alert indicating that it was opened, but if I close it and open it again, the message is displayed twice and if I repeat the process it is shown n times

this is the javascript that opens my modal

    function modificaru(idss){


            $('#md-mf').modal('show');
            $('#md-mf').on('shown.bs.modal',function(){
                alert("abierto");
            });

            $('#md-mf').on('hide.bs.modal',function(){
                alert("cerrado");

            });
     }

I hope you can help me

I generate some letters through an ajax request and I add them like this:

window.onload=function(){

          var nombre = localStorage.nombre;
          var tip=localStorage.tipo;
          $('.nombre-user').text(nombre);
          $('.tipo-user').text(tip);


          jQuery.ajax({
            url:'../assets/php/cargartrabajadores.php',
            type:'POST',
            dataType:'json',
            cache: false,
            data:{idvinedo:localStorage.idvinedo}
          })
          .done(function(respuesta){
             var nombret=respuesta.trabajadores.nombre;
             var tipot=respuesta.trabajadores.tipo;
             var emailt=respuesta.trabajadores.email; 

             for (let i = 0; i < nombret.length; i++){
              cuadros.push(i);
              let tipo;
              if (tipot[i]=='enologo') {
                tipo="Enólogo";
              }else{
                tipo="Agrónomo";
              }

              $("#user-list-c").after('<div class="col-sm-12 col-md-12 col-lg-8" style="margin-top:1.5%;"><div class="card card-n'+i+'" style="margin: 0%;"><div class="card-header" id="trab-t'+i+'"> <h3>'+tipo+'</h3></div><hr style="margin-top:-2%;height:1px;"><div class="card-body"><div class="row"><div class="col-5 col-sm-5 col-md-5 col-lg-5"><p id="name-t'+i+'">'+nombret[i]+'</br>  '+emailt[i]+'</p> </div><div class="col-7 col-sm-7 col-md-7 col-lg-7"><div class="row"><div class="col-6 col-sm-6 col-md-6 col-lg-6 csb1"><button type="button" id="btn-mf-us'+i+'" onclick="modificaru(this.id)" class="btn btn-warning btn-md btn-md-us float-right" style="margin-left:-20%;">Modificar</button></div> <div class="col-6 col-sm-6 col-md-6 col-lg-6"><button type="button" class="btn btn-danger btn-md float-left" id="btn-el-us'+i+'" onclick="EliminarTrabajador(this.id)">Eliminar</button></div></div></div></div></div></div></div>');
              } 
          })
          .fail(function(resp){
            console.log(resp.responseText);
          })
          .always(function(){
          });

      };

where through the for I assign an id to each letter to be able to identify them

javascript bootstrap modal

asked by zhet 26.09.2018 в 23:32

source

1 answer

Insert values in a row with auto-increment Set up a select without using php?

score 1 · Accepted Answer

In your code the bind of the event is made every time the modal is shown. You should remove the bindeo of the modulo method and do it in the onload of the page. The modulo method would be like this:

function modificaru(idss){
        $('#md-mf').modal('show');
}

and in window.load add the alert bind

    window.onload=function(){
        $('#md-mf').on('shown.bs.modal',function(){
            alert("abierto");
        });

        $('#md-mf').on('hide.bs.modal',function(){
            alert("cerrado");

        });
    ........