Question

我正在一个展示一些瓷砖的网站上工作。瓷砖的高度可能根据插入的图像和文字而有所不同。为了确保所有瓷砖达到相同的高度，我在头部编写了以下脚本：

function BindEvents()
{
    $(window).load(function () 
    {
        var maxHeight = Math.max.apply(null, $(".producttile").map(function () {
            return $(this).height();
        }).get());

        $('.producttile').height(maxHeight);

        maxHeight = Math.max.apply(null, $(".clistdiv").map(function () {
            return $(this).height();
        }).get());

        $('.clistdiv').height(maxHeight);
    });
}

以上脚本已绑定到datalist，如下所示：

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <hr width="100%" noshade/>
        <script type="text/javascript">
            Sys.Application.add_load(BindEvents);
        </script>
        <asp:DataList 
                ID="DataList1"
                runat="server"
                onitemcommand="DataList1_ItemCommand1"
                class="itemsdatalist"
                RepeatDirection="Horizontal"
                RepeatLayout="Flow"
                onload="DataList1_Load">
            <ItemTemplate>
                ...........rest of the code

现在，首次加载页面时，此绑定和磁贴自动调整工作正常。一个按钮触发ajax调用并引入更多tile并重新更新此更新面板。这就是问题所在。

BindEvents()未再次调用，因此图块大小不同，不会再次自动调整。

我试图将脚本保留在更新面板内容模板中，希望它能正常工作，但没有奇迹，它根本不起作用。

请帮忙。

Answer 1

最后我解决了这个问题。这是您的帮助解决方案。我刚刚在页面加载上编写了以下代码，它工作得很完美。

protected void Page_Load(object sender, EventArgs e)
{
    if (((ScriptManager)this.Master.FindControl("ScriptManager1")).IsInAsyncPostBack)
    {
        StringBuilder sb = new StringBuilder();
        sb.Append("<script language='javascript' type='text/javascript'>");
        sb.Append("Sys.Application.add_load(func);");
        sb.Append("function func() {");
        sb.Append("Sys.Application.remove_load(func);");
        sb.Append("var maxHeight = Math.max.apply(null, $('.producttile').map(function () { return $(this).height(); }).get()); $('.producttile').height(maxHeight);");
        sb.Append("maxHeight = Math.max.apply(null, $('.clistdiv').map(function () { return $(this).height(); }).get()); $('.clistdiv').height(maxHeight);");
        sb.Append("}");
        sb.Append("</script>");
        ScriptManager.RegisterStartupScript(this, GetType(), "script", sb.ToString(), false);
    }
}

感谢以下帮助我实现此解决方案的文章： The solution link

请告诉我这种方法有没有安全/性能漏洞？

脚本没有在Ajax回发上执行

1 个答案: