Question

我通过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或任何其他行中的其他更新按钮，模式不会显示。再次按下按钮后，模态将再次显示。关于我在这里做错了什么的想法？

Answer 1

替换：

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

    // ...
}

使用：

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

    // ...
}

现在它正在运作。我应该切换模态而不是关闭它。所以这个按钮仍然是打开的，我相信，这就是为什么它需要两次点击。问题解决了！

Bootstrap模态打开按钮需要两次单击才能在关闭后重新打开

1 个答案: