javascript - ASP.Net ScriptManager 和 UpdatePanel 在回发后忽略 javascript

Question

我在网站上使用 UpdatePanels 时遇到了重大问题。问题是，当我使用 ScriptManager 时，一旦更新面板回发，最初加载页面时处于事件状态的所有客户端 JavaScript 都会丢失。

这是我正在尝试做的...

我在同一页面上有许多 .net 日历控件，每个控件都在其自己的更新面板中。日历最初是隐藏的，直到您在关联的文本框内(也在更新面板内)单击，此时日历会弹出，以便您选择一个日期。在您实际更改日期(回发)之前，它们的日历一直很好用，之后当您在文本框内单击时日历不再弹出，“onfocus”JavaScript 丢失。

在谷歌上搜索了好几个小时后，我可以通过向 TextBox 动态添加“onfocus”属性并在日历回发时使用 ScriptManager 注册启动脚本来让事情半工作。

例子:

TextBox1.Attributes.Add("onfocus", "document.getElementById('searchArrivalDateCalendarDiv').style.display = 'block';")
ScriptManager.RegisterStartupScript(Page, GetType(Page), "StopTxtClick", "$(document).ready(function(){$('.txtArrivalDate').click(function(event){event.stopPropagation(); $('div.searchArrivalDateCalendarDiv').show(); });});", True)

这似乎真的不切实际，尤其是当我引入母版页时。我最终将不得不重新注册一大堆启动脚本。

一定有更简单的方法吗？

Answer 1

看起来您想使用事件委托(delegate)。主要思想是事件冒泡，因此您可以将事件处理程序附加到更新面板之外(可能附加到更新面板所在的 div 或表)。此处理程序负责它接收到的所有事件，因此即使您的更新面板回发并呈现新的文本框，您也不需要重新附加事件处理程序。当新文本框引发其事件时，您现有的事件处理程序可以尝试处理它。

以下只是在 javascript 中进行事件委托(delegate)的一种方法(使用 jquery 并取自 http://www.danwebb.net/2008/2/8/event-delegation-made-easy-in-jquery )

jQuery.delegate = function() {
            return function(e) {
                var target = $(e.target);
                if (target.attr("showCalendar")) {
                    var calendar = $("#" + target.attr("showCalendar"));
                    calendar.css("display", "block");
                }
            }
        }

        $(document).ready(function() 
        {
            $('#test').click($.delegate());
        });

<form id="form1" runat="server">
        <asp:ScriptManager runat="server" EnablePartialRendering="true"/>
        <div id="test" style="width:100%;">
            <asp:UpdatePanel runat="server">
                <ContentTemplate>
                    <input type="text" id="testText" showCalendar="testCalendarDiv" />
                    <div id="testCalendarDiv" style="display:none;">
                        <asp:Calendar runat="server" ID="testCalendar1"/>
                    </div>
               </ContentTemplate>
           </asp:UpdatePanel>
        </div>
    </form>

在这个简单的示例中，我在单击此 div 时注册了委托(delegate)方法(文本框和日历位于此 div 内)。当您单击文本框时，单击事件会冒泡到 div。委托(delegate)方法被调用，我检查引发事件的元素的 showCalendar 属性。如果这个属性存在，我找到这个属性指向的元素并更新它的显示样式。这是一个非常简单的示例，但您可以轻松地扩展委托(delegate)方法以接收它将根据您注册的某种规则调用的函数。