$(document).ready() 和 prm.add_endRequest() 中的重复代码答案

【问题标题】：Duplicate code in $(document).ready() and prm.add_endRequest()$(document).ready() 和 prm.add_endRequest() 中的重复代码
【发布时间】：2012-05-14 19:23:12
【问题描述】：

编辑： 在我更新最新代码后，现在我看到有两个“字符数”而不是只显示一个。这是否意味着它执行两次相同的代码？ document.ready 和 add_endrequest？

  $('[id*="txtNewComments"]').charCount({
            allowed: 300,
            warning: 15,
            counterText: 'Characters left: '
        });

当我开始使用 updatepanel 时，我正在使用带有 updatepanel 和一些 jquery 的 asp.net 页面，我的 jquery 和 javascript 函数停止工作，我没有看到任何操作...在我搜索后发现：jQuery $(document).ready and UpdatePanels? 链接非常内容丰富，但我有一个问题。

如果我有更新面板，下面是不起作用的代码...

$(document).ready(function() {

     $('[id*="txtNewComments"]').charCount({
            allowed: 300,
            warning: 15,
            counterText: 'Characters left: '
        });

     ..........
     ..........
});

//update:

function UpdateEmployee(....) {}

所以如果我继续使用推荐的方式，那么我必须有两组每个脚本，一组在文档中。准备就绪，另一组脚本在 endRequest 中，类似于 下面是如果我遵循此模式，则使用更新面板。

$(document).ready(function() {
    // bind your jQuery events here initially
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
    // re-bind your jQuery events here
});

我的问题是：有没有办法让一组脚本而不是 document.ready 中的一组脚本和 endrequest 中的一组脚本？...维护两组脚本很痛苦。

有什么想法吗？

使用更新面板更新

<asp:ScriptManager runat="server" />
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <asp:Repeater runat="server" ID="Repeater1" OnItemCommand="OnItemCommand" OnItemDataBound="OnItemDataBound">
                <HeaderTemplate>
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <th></th>
                            <th>First Name</th>
                            <th>Last Name</th>
                        </tr>
                </HeaderTemplate>
                <ItemTemplate>
                    <tr>
                        <td>
                            <asp:ImageButton ID="Edit" ImageUrl="~/Images/EditDocument.png" runat="server" CommandName="edit" />
                            <asp:ImageButton ID="Delete" ImageUrl="~/Images/Delete_black_32x32.png" runat="server"
                                CommandName="delete" />
                        </td>
                        <td>
                            <asp:Label runat="server" ID="firstName"><%# Eval("FirstName") %></asp:Label>
                            <asp:PlaceHolder runat="server" ID="firstNameEditPlaceholder" />
                            <input type="hidden" runat="server" id="firstNameHidden" visible="false" />
                        </td>
                        <td>
                            <asp:Label runat="server" ID="lastName"><%# Eval("LastName") %></asp:Label>
                            <asp:PlaceHolder runat="server" ID="lastNameEditPlaceholder" />
                            <input type="hidden" runat="server" id="lastNameHidden" visible="false" />
                        </td>
                    </tr>
                </ItemTemplate>
                <FooterTemplate>
                    <tr>
                        <td>
                            <asp:ImageButton ID="Delete" ImageUrl="~/Images/112_Plus_Blue_32x32_72.png" runat="server"
                                OnClick="OnAddRecord" />
                        </td>
                        <td><asp:TextBox runat="server" ID="NewFirstName" /></td>
                        <td><asp:TextBox runat="server" ID="NewLastName" /></td>
                    </tr>
                    </table>
                </FooterTemplate>
            </asp:Repeater>
        </ContentTemplate>
    </asp:UpdatePanel>

【问题讨论】：

既然您已经在使用 jQuery，为什么不将 UpdatePanel 替换为 $.ajax() 调用？
如果您包括如何使用您的UpdatePanel，我可以为您指明正确的方向。
您如何使用更新面板？也就是说，您为什么选择使用部分回发而不是整页回发？

标签： jquery asp.net updatepanel

【解决方案1】：

试试这个：

$(document).ready(function() {
    bindJqueryFeatures();
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
    bindJqueryFeatures();
});


function bindJqueryFeatures(){
    //bind your jQuery events here initially 
}

现在，如果您想更改或添加一些 jQuery 功能，只需在 bindJqueryFeatures() 函数中插入代码，这样您就不需要在两种方法中复制代码：$(document ).ready() 和 prm.add_endRequest()。

还有it can be usefull。

这是你需要的吗？

【讨论】：