twitter-bootstrap - 回发后Javascript无法正常工作

Question

我正在使用 asp.net Web 应用程序上的引导组件。它工作正常，但奇怪的是，它们在页面回发后停止工作。外表不错，但行为不行。这就是为什么我认为问题涉及 javascript 文件的原因。

例如，dorp down 按钮：回发后，展开操作不起作用。

你知道这可能是什么原因吗？

Answer 1

如果您使用 UpdatePanel 进行部分页面刷新，那么当面板的内容通过 AJAX 更新时，通常的$(document).ready(...) / $(...)东西不会再次触发，这意味着作为 Bootstrap 一部分的自定义 JS 功能（如下拉菜单）不会重新绑定到新元素。

我通常做的是将设置 javascript 事件处理程序和行为的代码提取到它们自己的函数中（例如），然后我在更新面板中使用以下代码以确保它在部分回发后function BindEvents() { ... }重新运行（以及与初始页面加载一样）：

<script type="text/javascript">
    Sys.Application.add_load(BindEvents);
</script>

编辑：这是一个建议的基本BindEvents()功能，应该为您重新初始化下拉菜单：

function BindEvents() {
    $('[data-toggle=dropdown]').dropdown();
    // other bootstrap binding code - see the combined Bootstrap.js for ideas
}

Answer 2

如果您使用这行代码，endRequestHandler 中的任何内容都应该在每次更新面板更新时触发。

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);

        function endRequestHandler(){

             // initialize controls here...

        }

Answer 3

将以下内容放在页面正文中解决了该问题：

<script type="text/javascript"> $('.dropdown-toggle').dropdown(); </script>