[英]Bootstrap modal open button requires two clicks to reopen after closing
[英]My Bootstrap Modal is Taking two clicks to open
最近,我遇到了一个我根本不知道如何解决的错误。
当我单击“ Ver Receita”按钮时,它什么都没有显示,但是如果再次单击,则模式会打开。 我认为问题在于,模态位于外部文件中(由于模态是动态的)。
带按钮的HTML
<button type="button"
class="btn btn-success text-center mb-1"
data-toggle="modal"
data-target="#receita"
onclick="verReceita(<?php echo $registo['id'];?>)">
Ver Receita
</button>
此按钮触发verReceita.php中的div出现
<div class="modal fade" id="receita">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="page-header text-center">Detalhes da Receita</h1>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<table class="table table-striped table-bordered border border-dark">
<tbody>
</tbody>
</table>
<h2>Ingredientes</h2>
<p>Quero que aqui apareçam os ingredientes associados à receita</p>
</div>
<div class="modal-footer">
<button class="btn btn-success" type="button" class="btn pull-left" data-dismiss="modal">Cancelar</a></button>
</div>
</div>
</div>
</div>
verReceita.php
function verReceita(id){
var numReceita = id;
$.post('verReceita.php',{postnumReceita: numReceita},
function(data){
$('#result').html(data);
});
}
我的verReceita.php发出AJAX请求,并将参数发送到外部verReceita.php
关于解决此两击问题有什么建议吗?
发生这种情况是因为您的按钮上有一个onClick侦听器,以及Bootstrap模式触发器。 您可以删除onClick侦听器,也可以从onClick侦听器调用的verReceita函数内触发模式。 下面的代码段显示了两个示例:
function verReceita() { $('#receita').modal('toggle'); }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <button type="button" class="btn btn-success text-center mb-1" data-toggle="modal" data-target="#receita"> <!-- onclick="verReceita(<?php echo $registo['id'];?>)"> --> Ver Receita </button> <button type="button" class="btn btn-info text-center mb-1" onclick="verReceita()"> Ver Receita 2 </button> <div class="modal fade" id="receita"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h1 class="page-header text-center">Detalhes da Receita</h1> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <table class="table table-striped table-bordered border border-dark"> <tbody> </tbody> </table> <h2>Ingredientes</h2> <p>Quero que aqui apareçam os ingredientes associados à receita</p> </div> <div class="modal-footer"> <button class="btn btn-success" type="button" class="btn pull-left" data-dismiss="modal">Cancelar</button> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.