fancybox 不适用于除第一页之外的 aspxgridview 页面

Question

我在 Aspxgridview 的页面上使用了 fancybox。在第一个网格页面中，它工作正常。当我单击网格的其他页面时，fancybox 不起作用并且 url 在新选项卡中打开。我想在 fancybox 弹出窗口中打开超链接 urls。可能是什么问题？

<script type="text/javascript">        
    $(document).ready(function () {
        $('.fancybox').fancybox({
            openEffect: 'none',
            closeEffect: 'none',
            showCloseButton: true,
            titleShow: true,
            transitionIn: 'elastic',
            transitionOut: 'elastic',
            width: '80%',
            heigh: '80%',
            autoScale: true,
            type: 'iframe',
            onClosed: function() {
                location.reload();
                return;
            }
        });
    });
</script>

...

    <dx:ASPxGridView ID="gridDX" ClientInstanceName="grid" runat="server" KeyFieldName="ID" OnDataBinding="gridDX_DataBinding" AutoGenerateColumns="False" OnPageIndexChanged="gridDX_PageIndexChanged">
      <Columns>
        <dx:GridViewDataColumn FieldName="Edit" Caption="View" VisibleIndex="1">
          <DataItemTemplate>
            <dx:ASPxHyperLink CssClass="fancybox" ID="hypShowEdit" ClientInstanceName="hypShowEdit" runat="server" ImageUrl="~/img/edit.png" Text="Show/Edit" NavigateUrl="Documents.aspx">
            </dx:ASPxHyperLink>                   
          </DataItemTemplate>
        </dx:GridViewDataColumn>
      </Columns>
    </dx:ASPxGridView>

此外，我还有一个 pageindexchanged 方法：

protected void gridDX_PageIndexChanged(object sender, EventArgs e)
    {
        var view = sender as ASPxGridView;
        if (view == null) return;
        var pageIndex = view.PageIndex;
        gridDX.PageIndex = pageIndex;
    }

Answer 1

您必须了解，当您编写 $('.your selector').fancybox() 之类的代码时，您是在与您的选择器匹配的页面上当前存在的元素上附加启动 fancybox 的点击事件。这意味着，如果您重新加载页面（或页面的一部分）以便用新元素替换当前元素，则必须再次调用 .fancybox()。

Answer 2

将 fancybox 初始化提取到一个单独的方法中，并在 ASPxClientGridView.Init（不是 jQuery document.ready）和 EndCallback 事件中调用它。

查看有关此的 Using jQuery / jQuery UI libraries with DevExpress ASP.NET Controls / MVC Extensions 指南。

//$(document).ready(function () {
function InitFancyBox() {
    $('.fancybox').fancybox({
        openEffect: 'none',
        closeEffect: 'none',
        showCloseButton: true,
        titleShow: true,
        transitionIn: 'elastic',
        transitionOut: 'elastic',
        width: '80%',
        heigh: '80%',
        autoScale: true,
        type: 'iframe',
        onClosed: function() {
            location.reload();
            return;
        }
    });
}
//});

<dx:ASPxGridView ...>
  <Columns>
    <dx:GridViewDataColumn ...>
      <DataItemTemplate>
        <dx:ASPxHyperLink CssClass="fancybox" ...>
        </dx:ASPxHyperLink>
      </DataItemTemplate>
    </dx:GridViewDataColumn>
  </Columns>
  <ClientSideEvents Init="InitFancyBox" EndCallback="InitFancyBox" />
</dx:ASPxGridView>

fancybox 不适用于除第一页之外的 aspxgridview 页面

fancybox is not working for aspxgridview pages except first page

asp.net

webforms

devexpress

fancybox

aspxgridview