ASP.NET UpdatePanel 阻止 JQuery 工作

Question

我的页面上有一个更新面板，其中一些链接具有触发 JQuery 框弹出的 onClick 事件。除非发生 AJAX 回发，否则这工作正常。我在另一篇文章中看到了一些代码：

Page.ClientScript.RegisterStartupScript(TypeOf(Page), 'ajaxTrigger1', 'Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);', true);
Page.ClientScript.RegisterClientScriptBlock(TypeOf(Page), 'EndRequest1', 'function EndRequestHandler(sender, args){AsyncDone();}', true);

我已经使用过它，但它似乎不起作用。我一直收到 AsyncDone 未定义的信息。有人知道我可以做些什么来解决这个问题吗？

详细信息：ASP.NET 2、IIS7

提前致谢。

Answer 1

问题是，当 updatepanel 触发时，它会替换 dom 中的一大块 html，这意味着它会替换您已将 click 事件绑定到的元素。

要绕过这个问题，请查看 jquery .live() 或 .delegate() 不断查找与您提供的选择器匹配的事件，或者如果您想在每次更新面板刷新内容时绑定到内容jQuery updatepanel 插件。

Answer 2

我通过不使用 jQuery 中的 document.ready 来对此进行排序。相反，我使用：

function pageLoad(sender, args) { //code }

我还没有看到任何不利影响，所以希望这能解决我的问题。

Answer 3

我使用更新面板只是为了停止 asp.net 中的整个页面刷新，其中甚至包括 jquery。但是在使用更新面板之后，问题得到了解决，但又产生了另一个问题。 jquery 脚本在 updatepanel 内不起作用。

这个问题现在已经解决了。

示例：在 jquery 日期选择器的情况下，Jquery 脚本的通常调用如下所示：

<script type="text/javascript">
    $(function() {
        $("#datepickers").datepicker({
                showOn: "button",
                 buttonImage:   "images/calendar.gif",
                 buttonImageOnly: true
                 });
          });
</script>

即使我使用了与此处出现的解决方案相同的代码

Page.ClientScript.RegisterStartupScript(TypeOf(Page), 'ajaxTrigger1',
'Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);',    true);
Page.ClientScript.RegisterClientScriptBlock(TypeOf(Page), 'EndRequest1', 'function EndRequestHandler(sender, args){AsyncDone();}', true);

： http://kopila.com.np/
但它对我不起作用。后来我知道 jquery 脚本在部分回发（即我们的 ajax 请求）后将无法工作。如果我们尝试在更新面板中调用任何 JQuery 脚本，则在第一个 ajax 请求后执行任何脚本将无法工作。

示例：当您使用 asp.net 更新面板时，请再次调用它，如下所示：

<script type="text/javascript">
        function pageLoad(sender, args) {

            if (args.get_isPartialLoad()) {

                $("#datepickers").datepicker({
                    showOn: "button",
                    buttonImage: "images/calendar.gif",
                    buttonImageOnly: true
                }); 

            }

        }
</script>

有关更多详细信息，请访问：http://kopila。 com.np