回发后asp.net jquery脚本未运行

Question

我花了几个小时寻找答案，但似乎无法完成这项工作。 我知道 asp.net 中的 javascript/jquery 仅在您有更新面板的情况下才首次工作，所以当您在 gridview 上页面时我也需要它来工作。 我发现您需要在更新面板中放置一些代码以在每次回发时刷新 javascript。 所以这是我尝试过的代码，它不起作用（给出'BindEvents not defined'错误）

这是不起作用的代码（短）：

 <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>

但是，如果您在更新面板中添加脚本 区域如下，它完美地工作。问题是我不想将 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

我最近遇到了这个问题，当我的引导选项卡和其他项目在添加更新面板后不再工作时。项目必须重新初始化。

我用两个项目解决了这个问题。首先在回发时重新加载所有脚本。第二次重新初始化任何 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：这就是我的绑定事件中的内容

    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");
    });
}