Мой Bootstrap Модал принимает два клика, чтобы открыть

Question

Недавно я столкнулся с этой ошибкой, которую просто не знаю, как исправить.

Когда я нажимаю кнопку «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>

Эта кнопка вызывает div внутри verReceita.php , чтобы показать

<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);
  });
}

Мой verReceita.php делает AJAX-запрос и отправляет параметр на внешний verReceita.php

Есть ли какие-либо предложения по устранению этой проблемы двумя щелчками мыши?

Answer 1

Это происходит потому, что на вашей кнопке есть слушатель onClick, а также модальный триггер Bootstrap.Вы можете удалить прослушиватель onClick или запустить модальный режим из функции verReceita, которая вызывается из прослушивателя onClick.Фрагмент ниже показывает оба примера:

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>