模态弹出窗口在 UpdatePanel 内不起作用

Question

我在 UpdatePanel 中有一个 gridview 。 gridview 中的一列是链接，单击时应显示模态（我正在使用 zurb modal http ://www.zurb.com/playground/reveal-modal-plugin）。问题是，当单击链接时，模式仅显示一次，下次单击链接时，它只会刷新页面。每次单击 gridview 内的链接时都应显示模式。

模态脚本：

function popupModal()
{
    $("a.link").click(function (e) {
        e.preventDefault();
        $('#myModal #modalContents').load($(this).attr('href'));
        $('#myModal').reveal();
    });
}

GridView：

<asp:ScriptManager ID="smgr" runat="server" EnablePartialRendering="true" />
<asp:UpdatePanel ID="upnlSearchResults" runat="server" RenderMode="Inline">
    <ContentTemplate>       
        <asp:GridView ID="gvResult" runat="server" AutoGenerateColumns="false">                   
            <Columns>
                <asp:BoundField DataField="EmployeeID" HeaderText="Employee ID"  />
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        </td></tr>
                        <tr>
                            <td colspan="10">
                                <a href="Department.aspx" class="link">Detail Information</a>
                            </td>
                        </tr>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnSearch" />
    </Triggers>
</asp:UpdatePanel>

    <div id="myModal" class="reveal-modal">
         <div id="modalContents"></div>
         <a class="close-reveal-modal">&#215;</a>            
    </div>

绑定 GridView 并注册模态弹出窗口的代码

protected void btnSearch_Click(object sender, ImageClickEventArgs e)
{
    var results = _presenter.GetEmployers();
    gvResult.DataSource = results;
    gvResult.DataBind();

    ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "popUp", "popupModal();", true);

}

编辑：我尝试调试 javascript，代码在它所在的行中断 显示弹出窗口

 函数 popupModal()
    {
        $("a.link").click(function (e) {
            e.preventDefault();
            $('#myModal #modalContents').load($(this).attr('href'));
            $('#myModal').reveal(); -> [在这一行中抛出错误。]
        });
    }

由于我使用的是 zurb modal，它由 jquery.reveal.js 文件组成 其中包括揭示功能。函数 popupModal 在我的 单独的js文件employee.js。由于错误消息是这样的 像这样'对象不支持IE中的属性或方法'显示'，我 我假设一旦弹出模式第一次显示，它 无法从jquery.reveal.js 文件中找到reveal 函数。

谁能帮我解决这个问题？

桑吉耶夫

Answer 1

好吧终于找到了解决方案。不知道，但你不能在项目中引用 jquery.js 文件两次。我在主文件中引用了 jquery.js 文件，并且在 Department.aspx 文件中引用了相同的引用。摆脱了重复的 jquery 引用，它工作得很好。

Answer 2

可能发生的情况与 jquery 和 updatepanels 之间发生的冲突相同（知道您没有使用 jquery，但我确信这是同一类型的问题）。基本上 updatepanel 不会刷新整个 DOM，因此其他 js 库的函数永远不会被调用。这是一篇关于处理它的博客文章。

http://weblogs.asp.net/hajan/archive/2010/10/07/make-them-to-love-each-other-asp-net-ajax-updatepanels-amp-javascript- jquery-functions.aspx

Answer 3

Jquery 不能很好地与 updatePanels 配合使用，除非您执行以下操作：

function pageLoad() {
  //Your Jquery code goes here...
}