Modal window does not open to confirm deletion, js-CodePudding

I am trying to integrate into my site in bootstrap 5, a modal window to confirm the deletions, but for some reason the modal sale is not shown and therefore the link is not executed. What is wrong? Maybe you know something better for it... Thank you

This is link href

<a href="index.php?del=1" data-confirm='¿Está seguro de que desea eliminar el elemento seleccionado?'><button  type="button"><span ><i ></i></span>Eliminar</button></a>

Js code

$(document).ready(function(){
$('a[data-confirm]').click(function(ev){
    var href = $(this).attr('href');
    if(!$('#confirm-delete').length){

        
        $('body').append('<div  id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><div ><div ><div >ELIMINAR REGISTRO<button type="button"  data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div >¿Está seguro de que desea eliminar el elemento seleccionado?</div><div ><button type="button"  data-dismiss="modal">Cancelar</button><a  id="dataComfirmOK">Borrar cliente</a></div></div></div></div>');
    }
    $('#dataComfirmOK').attr('href', href);
    $('#confirm-delete').modal({show: true});
    return false;
 });
});

CodePudding user response：

Your link was going to the href it has. You should cancel that.

$(document).ready(function() {
  $('a[data-confirm]').click(function(ev) {
    var href = $(this).attr('href');
    if (!$('#confirm-delete').length) {


      $('body').append('<div  id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><div ><div ><div >ELIMINAR REGISTRO<button type="button"  data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div >¿Está seguro de que desea eliminar el elemento seleccionado?</div><div ><button type="button"  data-dismiss="modal">Cancelar</button><a  id="dataComfirmOK">Borrar cliente</a></div></div></div></div>');
    }
    $('#dataComfirmOK').attr('href', href);
    $('#confirm-delete').modal({
      show: true
    });
    return false;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ/JpcUGGOn Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>


<a href="index.php?del=1" data-confirm='¿Está seguro de que desea eliminar el elemento seleccionado?' onclick="return false">
  <button  type="button">
    <span ><i ></i></span>
    Eliminar
  </button>
</a>

CodePudding user response：

In your javascript, if you change

$('#confirm-delete').modal({
    show: true
});

$('#confirm-delete').modal('show');

then it should trigger showing the modal. Tested on the latest Bootstrap (v5.2).