javascript - Bootstrap 下拉菜单部分在模式下工作

标签 javascript jquery html twitter-bootstrap

我有一个充满服务器名称的表格。当我单击该链接时,它会转到一个页面,其中包含有关该服务器的各种信息。我使用 SSO 来确定用户是否能够通过带有可选项目的保管箱更改某些字段。这一切都很好......作为一个页面

但是,我想将该页面转换为模式。我的模态工作正常,它会提取所有信息...但是,下拉框只能每隔一次工作。毫不夸张,每隔一段时间。我单击服务器,模式出现,下拉列表中没有值。我可以用 firebug 检查它,并看到它在下拉列表中具有值,但没有任何反应。我关闭模式,单击链接(相同或不同),下拉菜单工作得很好

这是我的html

<td><a href="{{ url_for('vm', vm=vm.GuestName) }}" data-keyboard="false" data-target="#vmModal" data-toggle="modal"> {{ vm.GuestName }}</a></td>

这是我的模式

<div class="modal hide fade in" id="vmModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3 id="myModalLabel">Virtual Machine Info</h3>
    </div>
    <div class="modal-body" style="height: 600px; right: 12px">
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div><!-- /.modal -->

这是我的下拉菜单

{% if access %}
        <div class="dropdown">
            <li>
                <strong>Service:</strong>
                <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> {{ item.Service }} <b
                        class="caret"></b></a>
                <ul class="dropdown-menu" role="menu">
                    {% for service in service_data %}
                        <li><a tabindex="-1"
                               href="/api?name={{ item.GuestName }}&service={{ service.name }}"> {{ service.name }}</a>
                        </li>
                    {% endfor %}
                </ul>
            </li>
        </div>

最佳答案

我刚刚解决了一个非常类似的问题,我的模态对话框导致下拉菜单仅在我每次打开模态对话框时才起作用。下拉菜单最初可以使用。但如果我打开并关闭模式,它就会停止工作。然后,如果我打开模式并再次关闭它,下拉菜单将再次工作。问题很简单,包含模态内容的目标 url 正在引用 bootstrap.js 文件,而该文件已在父页面中引用。因此,我所要做的就是从模态内容页面中删除以下内容:

<script src="../js/bootstrap.min.js"></script>  

编辑:实际上,当我从模式内容页面中删除它时,其他元素停止工作,所以我将其添加回来。相反,我将其添加了两次,一次在页面顶部,另一次在页面底部标签之前。现在每次都有效。我不明白。还有其他人知道为什么会发生这种情况吗?

Fabrice G,我尝试了你推荐的方法,但我无法让它以这种方式工作。我一定有不同的问题。

关于javascript - Bootstrap 下拉菜单部分在模式下工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19137995/

相关文章:

javascript - 如何在 CasperJS 中单击此按钮?

php - 单击按钮时触发 jquery validate()

javascript - 如何在javascript中链接?

html - 在 IE8 网络浏览器上的 Icefaces 3 应用程序中重定向后未应用 CSS 样式

jquery - 将 Div 定位在窗口高度以下

JavaScript 多重 promise 导致 null

javascript - javascript 数组可以同时是数字数组和关联数组吗?

javascript - 为什么要在 AngularJS 中使用 $onInit?

javascript - 从另一个下拉值引用的下拉值

javascript - 更改模型时淡出和淡入(动画)