Bootstrap模态打开按钮关闭后需要点击两次才能重新打开答案

【问题标题】：Bootstrap modal open button requires two clicks to reopen after closingBootstrap模态打开按钮关闭后需要点击两次才能重新打开
【发布时间】：2015-11-11 12:11:26
【问题描述】：

我正在通过带有data attributes 的按钮触发模式。该按钮位于datatable 上。模态用于更新数据库中的实体。这是打开模式的代码：

<button 
    data-toggle="modal" 
    data-target="#updateInstitutionModal" 
    data-id="' + data.id + '" 
    data-name="' + data.name + '" 
    data-requires_id="' + data.requires_id + '"
    class="btn btn-xs btn-primary bootstrap-modal-form-open"
>
    <i class="glyphicon glyphicon-edit"></i> Edit
</button>

我正在使用这个https://github.com/JesseLeite/Laravel-Bootstrap-Modal-Form 扩展来处理模式中的表单，该模式处理对我的后端（PHP/Laravel）的 ajax 请求。一旦表单提交且未返回错误，我对其进行了一些修改以执行以下操作：

function reload() {
    // remove the modal
    $('#updateInstitutionModal').hide();
    $('body').removeClass('modal-open');
    $('.modal-backdrop').remove();
    // refresh my datatable
    $('#institutions-table').DataTable().ajax.reload();
    return true;
}

最初它只是执行以下操作：location.reload(); 而我正在调用我自己的重新加载方法。

问题是，如果我单击更新按钮并执行更新，一切正常，但如果我立即单击按钮以更新 x 或任何其他行中的另一个更新按钮，则模式不会显示。再次按下按钮后，模态将显示。关于我在这里做错了什么有什么想法吗？

【问题讨论】：

标签： javascript jquery ajax twitter-bootstrap bootstrap-modal

【解决方案1】：

替换：

function reload() {
    // remove the modal
    $('#updateInstitutionModal').hide();
    $('body').removeClass('modal-open');
    $('.modal-backdrop').remove();

    // ...
}

与：

function reload() {
    // toggle the modal
    $('#updateInstitutionModal').modal('toggle');

    // ...
}

现在它开始工作了。我应该切换模式而不是关闭它。因此，我相信该按钮仍将其读取为打开状态，这就是单击两次的原因。问题解决了！

【讨论】：