Question

我有一个User Control，它有一个UpdatePanel，里面是一个Repeater，里面是Linkbuttons：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="RelatedEntityControl.ascx.cs" Inherits="MyApp.Controls.Layout.RelatedURLControl" %>
<asp:UpdatePanel ID="RelatedObjectsPanel" runat="server">
<ContentTemplate>
 <script type="text/javascript">
        function openPopup(url, h, w, t, link) {
            {
                if (url != null && h != null && w != null && t != null && link != null) {
                    var btn = document.getElementById(link);
                    var top_distance = btn.getBoundingClientRect().top;
                    var left_distance = btn.getBoundingClientRect().left;
                    var myDialogX = left_distance - w/2;
                    var myDialogY = top_distance;
                    $('#PreviewWindow').html('<iframe style="border: 0px; " width="100%" height ="100%" src="' + url + '"> </iframe>');
                    $("#PreviewWindow").dialog({
                        title: t,
                        modal: false,
                        autoOpen: true,
                        height: h,
                        width: w,
                        closeOnEscape: true,
                        position: [myDialogX, myDialogY],
                        dialogClass: 'dialog_fixed,ui-widget-header',
                        open: function (event, ui) {
                            $(this).css('overflow', 'hidden'); //this line does the actual hiding of the vertical scrollbar
                        }
                    });
                }
            };
        }
    </script>
    <script type="text/javascript">
        $(function () {
            var btn = $('.previewLink');
            btn.hoverIntent(function (e) {
                e.target.click();
            }, function () { });
        });
    </script>

        <asp:Panel ID="URLPanel" runat="server" Visible="false">
        <asp:CollapsiblePanelExtender ID="URLsCollapsiblePanel" runat="server" CollapseControlID="URLsLabel" ExpandControlID="URLsLabel" TargetControlID="URLsPanel" TextLabelID="URLsLabel"
            CollapsedText="[ + ]  Related URLs" ExpandedText="[ - ]  Related URLs" />
        <asp:Label ID="URLsLabel" runat="server" CssClass="collapsiblePanelHeader" Text="" Width="90%"></asp:Label>
        <asp:Panel ID="URLsPanel" runat="server" CssClass="collapsiblePanelContent" style="height: auto;">

            <asp:Repeater ID="URLsLocalRepeater" runat="server" OnItemDataBound="LocalRepeater_ItemDataBound" ItemType="SSPS.Models.Relationships.RelatedURL">
                <HeaderTemplate>
                    <ul>
                </HeaderTemplate>
                <ItemTemplate>
                    <li>
                        <asp:HyperLink ID="HyperLink1" Text='<%# Item.Title %>' NavigateUrl='<%# Item.ActualLink %>' runat="server" Target="_blank" ToolTip='<%# Item.ToolTip %>'></asp:HyperLink>&nbsp;&nbsp;<asp:LinkButton ID="PreviewButton" runat="server" CausesValidation="false" Text="preview" OnClick="PreviewButton_Click" Font-Size="X-Small"  CssClass="previewLink"></asp:LinkButton>
                        <div id="PreviewWindow"></div>
                    </li>
                </ItemTemplate>
                <FooterTemplate>
                    </ul>
                </FooterTemplate>
            </asp:Repeater>
        </asp:Panel>
    </asp:Panel> 
</ContentTemplate>

Javascript片段将一个hoverIntent函数附加到LinkButtons，这样当用户将鼠标悬停在它们上面时，我会抓住该悬停，然后使LinkButton单击（）。从那里我们去服务器端，在那里我为Linkbutton做一些处理，最终最终做到了LinkButton：

protected void PreviewButton_Click(object sender, EventArgs e)
{
    //figure out the loc, url and so forth
    string loc = ResolveUrl("~/PreviewWindow.aspx");
    loc += "?url=" + url.ActualLink;
    ScriptManager.RegisterStartupScript(this, this.GetType(), "dlg", "openPopup('" + loc + "', " + url.HintHeight + ", " + url.HintWidth + ", '" + url.Title + "', '" + previewButton.ClientID + "')", true);
    return;
}

现在，我加载了我的页面及其关联的UserControl，而我的LinkButton只是坐在那里盯着我，直到我将鼠标悬停在它们上面。一旦我这样做，然后弹出jQuery对话框并显示我要求的网址。

到目前为止一切都很顺利。但是一旦我关闭对话框，一切都会崩溃。我再次将鼠标悬停在LinkButton上（相同或不同，并不重要）并且没有任何反应。服务器端的PreviewButton_Click（）函数永远不会被调用，而且所有东西都只是傻傻地盯着我。

为了尝试缩小问题范围，我删除了设置hoverintent功能的Javascript。如果没有这个，我必须实际点击LinkButton，但无论我点击多少次都无法启动对话框，所以似乎javascript部分存在问题。

我，凭借对javascript的非常深入的了解，我认为有一些行动搞砸了javascript。但我不确定在哪里看。我已经在Chrome的检查窗口中查看了它，但javascript中似乎没有任何错误。

有什么建议吗？

更新：在尝试了@mjw和@WevDev的建议之后，我发现了更多有关奇怪行为的证据。我发现我在UserControl中做的任何导致回发的事都会杀死jquery对话框。所以它看起来确实像回发导致丢失调用hoverIntent的javascript。但我尝试的任何东西都无法解决javascript的丢失问题。

Answer 1

它有一个问题，因为

ASP.Net page lifecicle。

首先悬停有效，因为您使用此js代码注册悬停事件处理程序

$(function () {
   var btn = $('.previewLink');
   btn.hoverIntent(function (e) {
      e.target.click();
   }, function () { });
});

回发后，ASP.NET重新呈现updatepanel中的所有内容，因此以前注册的处理程序不再有效。这意味着var btn = $('.previewLink')（以前选择的元素）与新渲染的元素无关。

与<a>具有点击处理程序的情况相同，然后删除<a>并创建新的<a>。 HTML将看起来像以前一样，但点击处理程序不再工作，因为它与新创建的元素无关。

$(function(){ .... });这是文档准备的简写。因此，当文档准备就绪时，它只会触发一次。回发后，此功能不会被触发。因此，您新创建了<a>，但没有用于注册处理程序的js代码。

因此，将脚本块向下移动到面板下方（但保留在updatepanel内），并删除文档就绪的速记。 e.g。

<script>
............
var btn = $('.previewLink');
btn.hoverIntent(function (e) {
   e.target.click();
}, function () { });
</script>

希望这有帮助

[UPDATE]

试试这个：

protected void Page_PreRender(object sender, EventArgs e)
    {
        var script = @"
        var btn = $('.previewLink');
                btn.hoverIntent(function (e) {
                    e.target.click();
                }, function () { });
        ";

        ScriptManager.RegisterClientScriptBlock(this, typeof(Page), "someKey",
            script, true);
    }

希望这有帮助

ASP.Net jQuery对话框仅在它第一次盘旋时出现

1 个答案: