在内容页面中更新面板后，我的 jquery 选择器不起作用答案

【问题标题】：My jquery selectors doesn't work after update panel in content page在内容页面中更新面板后，我的 jquery 选择器不起作用
【发布时间】：2017-12-31 14:23:30
【问题描述】：

我有一个内容页面，我在 asp:updatepanel 之后编写了一些 jquery 选择器，这是第一次在页面加载时 $(document).ready(function() 工作正常，但是在回发后，选择器不再工作，有什么办法可以解决这个问题吗？？

<asp:content id="Content1" contentplaceholderid="contentplaceholder1" runat="server">       
     <asp:UpdatePanel ID="UpdatePanel1" runat="server">
         <ContentTemplate>
              <asp:TextBox ID="txtdate" runat="server" CssClass="persianDTP" ></asp:TextBox>
                           <!-- some code --> 

           </ContentTemplate>
    </asp:UpdatePanel>

    <script>
                    $(document).ready(function () {
                        $('.PersianDTP').datepicker({
                            showOn: 'button',
                            buttonImage: 'calendar.png',
                            dateFormat: 'yy/mm/dd',
                            //appendText: ' (yy/mm/dd)',
                            changeMonth: true,
                            changeYear: true,
                            //selectOtherMonths: true,
                            //showOtherMonths: true,
                            showStatus: true,
                            showButtonPanel: true,
                            buttonImageOnly: true,
                            buttonText: 'Choose a Date',
                            onClose: function () {
                                this.focus();
                            }
                        });

                        jQuery(function ($) {
                            $(".PersianDTP").mask("9999/99/99");
                        });  

                    });
     </script>
</asp:content>

【问题讨论】：

.PersianDTP在哪里？
你的意思是在 .PersianDTP 被 ajax 更新后，datepicker 不起作用？
.persianDTP 是更新面板中某些控件的类
您的意思是在.PersianDTP 被ajax 更新后，日期选择器不起作用？确切地说，@wander
原因很简单。原始的 .PersianDTP 已被删除，新的 .PersianDTP 尚未绑定到 datepicker 小部件。您应该做的是将日期选择器绑定到 ajax 回调函数中的新 .PersianDTP。

标签： jquery asp.net content-pages

【解决方案1】：

所有 JQuery 插件都应用于 HTML 页面的页面加载事件，或者换句话说，当整个页面或文档在浏览器中完全呈现时触发的文档就绪事件。但是当控件在 UpdatePanel 内部并且发生部分回发时jQuery 分配的唯一 ID 丢失，因此插件停止工作，您可以在每次 UpdatePanel 的异步请求或部分回发完成时重新应用 jQuery 插件：您需要在回发时重新创建 Jquery 代码。
示例代码:)

<asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <script type="text/javascript">
        $(document).ready(function () {
            $(<%=lstBoxTest.ClientID%>).SumoSelect({ selectAll: true });
        });

        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
        function EndRequestHandler(sender, args) {
            //Binding Code Again
            $(<%=lstBoxTest.ClientID%>).SumoSelect({ selectAll: true });
        }
    </script>

【讨论】：