jquery - Bootstrap 3 模态重定向页面打开

Question

我遇到了一个非常奇怪的错误，我似乎无法弄清楚为什么。自 Bootstrap 发布以来我一直在使用它，并且非常熟悉它的工作原理。我设置了一个带有按钮的表单，这些按钮触发位于文档底部的模式。当您单击触发模式的按钮时，它会打开模式，但刷新页面，将表单元素/值附加到 URL，就像使用 GET 方法提交表单一样。刷新页面时，模式不再打开，并且 URL 包含查询中的所有表单值。我一生都无法弄清楚为什么会发生这种情况。模式应该打开，并且页面应该保持不受影响(模式打开除外)

下面是表单元素和模式按钮的 HTML:

<div class='form-group'>
    <label class='control-label' for='store-name'>
        Store Name:
    </label>
    <div class='controls'>
        <input type='text' class='form-control' id='store-name' name='store-name'>
        <button class='btn btn-default' data-toggle='modal' data-target="#storeName">Lookup</button>
    </div>
</div>  

这是模式本身的 HTML:

<!-- Store Name Modal -->
<div class="modal fade" id="storeName" tabindex="-1" role="dialog" aria-labelledby="storeName" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Stores</h4>
            </div>
            <div class="modal-body">
                <!-- Modal Content -->  
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

所有脚本/样式都包含在内，因为模式实际上确实打开了，它只是在打开时重定向页面。有没有人遇到过这样的错误或者知道可能是什么原因造成的？

Answer 1

如果您有 <button>在表单内，HTML 将该按钮解释为提交按钮。您的页面正在重新加载，因为每次单击该按钮时都会提交表单。

解决此问题的第一个选择是创建一个函数来捕获事件，然后阻止其提交。如果表单中有多个按钮，这可能会让人头疼。

从 Bootstrap 的角度来看，最简单的事情就是更改 <button class='btn'>到<a class='btn'> 。 Bootstrap 以相同的方式设计它们，因此您可以互换使用它们。这样做的好处是，当您单击 anchor 标记时，它不会提交您的表单。