我的Bootstrap模态打开两次

Question

Recently I've come across this bug that I simply don't know how to fix.

When I click on the button "Ver Receita" it doesn't show anything, but if I click again the modal opens. I think that the problem is in the fact that the modal is in an external file (Due to the fact that the modal is dynamic).

The HTML with the button

<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>

This Button is triggering the div inside verReceita.php to show up

<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">&times;</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);
  });
}

My verReceita.php makes a AJAX request and sends the parameter to the external verReceita.php

Any suggestion on fixing this two-click issue?

Answer 1

This is happening because you have an onClick listener on your button, as well as the Bootstrap modal trigger. You can either remove the onClick listener, or you can trigger the modal from within the verReceita function that's called from the onClick listener. The snippet below shows both examples:

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">&times;</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>

</div>