回发后 Javascript 不起作用 [英] Javascripts not working after postback

问题描述

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

I'm working with bootstrap components on a asp.net web application. It's works fine, but curiously, they stop working after a page postback. The appearance is fine, but the behavior isn't. That's why i supose that the problem envolves the javascript files.

例如，一个 dorp down 按钮:回发后，展开操作不起作用.

For example, a dorp down button: after postback, the expand action doesn't work.

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

Do you have an idea what could be the cause of this?

推荐答案

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

If you are using an UpdatePanel to do a partial page refresh, then when the contents of the panel are updated via AJAX, the usual $(document).ready(...) / $(...) stuff does not fire again, which means that the custom JS functionality (like the dropdowns) that is part of Bootstrap does not get re-bound to the new elements.

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

What I usually do is extract my code that sets up the javascript event handlers and behaviour into their own function (e.g. function BindEvents() { ... }), and then I use the following code inside the update panel to ensure it gets re-run after the partial postback (as well as on the initial page load):

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

这是一个建议的基本 BindEvents() 函数，它应该为您重新初始化下拉列表:

Here is a suggested basic BindEvents() function that should re-initialise the dropdowns for you:

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

这篇关于回发后 Javascript 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！