Question

我花了几个小时寻找答案，但似乎无法使这项工作成功。我知道如果你有一个更新面板，asp.net中的javascript / jquery只能在第一次工作，所以当你在gridview上页面时我也需要它来工作。我发现你需要在updatepanel中放置一些代码，以便每次回发时刷新javascript。所以这是我尝试的代码，它不起作用（给出'BindEvents未定义'错误）

以下是不起作用的代码（简称）：

 <asp:UpdatePanel runat="server" ID="updatePanel1" UpdateMode="Conditional">
        <ContentTemplate>

            <script type="text/javascript">
                Sys.Application.add_load(BindEvents); ' reload jquery again after postback 

            </script> 

             <div id="div_GRIDVIEW" class="div_Gridview" clientidmode="Static"  runat="server">
<asp:GridView ID="GridView1">
...grid data
</asp:GridView>
 </div>
some more code....

             <script type="text/javascript">
                 function BindEvents() {

                     $("table.STD_GridView tr").mouseover(function (event) {

                         var color = $(this).css("background-color");
                         $(this).css("background", "#f6f6f6");
                         $(this).bind("mouseout", function () {
                             $(this).css("background", color);
                         })
                     }
                 )
                 }
           </script>
</body>
</html>

但是，如果您在updatepanel中添加脚本区域如下，它完美地运作。问题是我不想把javascript / jquery代码放在更新面板中，但是在底部，因为我有很多javascript / jquery代码（这里只是一个例子）

任何指导将不胜感激

<asp:UpdatePanel runat="server" ID="updatePanel1" UpdateMode="Conditional">
<ContentTemplate>

    <script type="text/javascript">
        Sys.Application.add_load(BindEvents); ' triggers jquery again after postback of gridview'

        function BindEvents() {

            $("table.STD_GridView tr").mouseover(function (event) {

                var color = $(this).css("background-color");
                $(this).css("background", "#f6f6f6");
                $(this).bind("mouseout", function () {
                    $(this).css("background", color);
                })
            }
        )
        }


    </script> 

     <div id="div_GRIDVIEW" class="div_Gridview" clientidmode="Static"  runat="server">

Answer 1

最近，当我添加UpdatePanel后，我的Bootstrap Tabs和其他项目不再有效时，我遇到了这个问题。项目必须重新初始化。

我用两个项目解决了这个问题。首先在回发时重新加载所有脚本。第二次重新启动任何jQuery功能。

A）在每次回发时重新加载所有脚本。我使用客户类加载CSS和JavaScript而不是捆绑包配置...这是在母版页的page_load中，每次都会触发。

 ClientScripts.AddClientScripts(Page);

B）客户端脚本加载

public static class ClientScripts
    {
        public static void AddClientScripts(Page page)
        {
            //Making it Month instead to limit downloads
            string ID = DateTime.Now.Month.ToString();

            //Change this if pushing CSS changes during the day
            string VerNo = "41";

            ID = ID + VerNo;

            AddJavaScriptFile(page, "Scripts/jquery-1.11.1.min.js", ID);
            AddJavaScriptFile(page, "Scripts/bootstrap.min.js", ID);
            AddJavaScriptFile(page, "Scripts/DevExpress.js", ID);            
            AddJavaScriptFile(page, "Scripts/ValidateNumber.js", ID);            

            AddCSSFile(page, "Content/bootstrap.min.css", ID);
            AddCSSFile(page, "font-awesome/css/font-awesome.min.css", ID);         

        }
        private static void AddJavaScriptFile(Page page, string path, string id)
        {            
            //var Key = path.Replace("Scripts/", "");
            //Key = Key.Replace(".js", "");
            //page.ClientScript.RegisterClientScriptInclude(Key, path);

            path = page.ResolveUrl("~/" + path) + "?id=" + id;

            //Add to header
            HtmlGenericControl child = new HtmlGenericControl("script");
            child.Attributes.Add("type", "text/javascript");
            child.Attributes.Add("src", path);
            page.Header.Controls.Add(child);

            //Line break
            page.Header.Controls.Add(new LiteralControl("\r\n"));
        }
        /// <summary>
        /// Add CSS File
        /// </summary>
        private static void AddCSSFile(Page page, string path, string id)
        {
            path = page.ResolveUrl("~/" + path) + "?id=" + id;

            HtmlLink lnk = new HtmlLink();
            lnk.Attributes.Add("rel", "stylesheet");
            lnk.Attributes.Add("href", path);
            lnk.Attributes.Add("type", "text/css");
            page.Header.Controls.Add(lnk);

            //Line break
            page.Header.Controls.Add(new LiteralControl("\r\n"));
        }
    }

C）有时你必须重新启动Bootstrap等组件。在UpdatePanel中添加以下内容。

Sys.Application.add_load将调用“BindEvents”JavaScript函数来重新初始化jQuery。

<script type="text/javascript">
       Sys.Application.add_load(BindEvents);
</script>

B）BindEvents：这就是我在Bind Events中的含义

    function BindEvents() { 

    //--- START Popovers with x -----
    $('.popoverThis').popover({
        html: true,
        placement: 'right',
        content: function () {
            return $($(this).data('contentwrapper')).html();
        }
    });
    $('.popoverThis').click(function (e) {
        e.stopPropagation();
    }); 
    $(document).click(function (e) {
        if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
            $('.popoverThis').popover('hide');
        }
    });

    //POPOVER --- TOP ---
    $('.popoverThisTop').popover({
        html: true,
        placement: 'top',
        content: function () {
            return $($(this).data('contentwrapper')).html();
        }
    });
    $('.popoverThisTop').click(function (e) {
        e.stopPropagation();
    });
    $(document).click(function (e) {
        if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
            $('.popoverThisTop').popover('hide');
        }
    });

    //--- END Popovers with x -----

    //Accordion
    $('#accordion').on('hidden.bs.collapse', function () {
        //do something...
    })
    $('#accordion .accordion-toggle').click(function (e) {
        var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
        $("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
    });
}

asp.net jquery脚本在回发后没有运行

1 个答案: