ASP.Net 2012 JQuery 和更新面板不起作用:一个绑定列表框并使用 jquery 将我的结果填充到另一个列

Question

我的列表框位于 UpdatePanel 中。 我使用此代码将数据从绑定列表框传输到空列表框以获取结果。 我正在使用下拉列表来填充绑定列表框的结果。 我在这里做错了什么：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#lstright").bind("click", function lstRight() {
            var options = $("[id*=lstListTenants1] option:selected");
            for (var i = 0; i < options.length; i++) {
                var opt = $(options[i]).clone();
                $(options[i]).clone();
                $("[id*=lstListTenants2]").append(opt);
            }
        });
        $("#lstleft").bind("click", function lstLeft() {
            var options = $("[id*=lstListTenants2] option:selected");
            for (var i = 0; i < options.length; i++) {
                var opt = $(options[i]).clone();
                $(options[i]).remove();
                //$("[id*=lstEmailAddress]").append(opt);
            }
        });
    });
    var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_endRequest(function (s, e) {
        $(function () {
            $("#lstright").bind("click", function lstRight() {
                var options = $("[id*=lstListTenants1] option:selected");
                for (var i = 0; i < options.length; i++) {
                    var opt = $(options[i]).clone();
                    $(options[i]).clone();
                    $("[id*=lstListTenants2]").append(opt);
                }
            });
            $("#lstleft").bind("click", function lstLeft() {
                var options = $("[id*=lstListTenants2] option:selected");
                for (var i = 0; i < options.length; i++) {
                    var opt = $(options[i]).clone();
                    $(options[i]).remove();
                    //$("[id*=lstEmailAddress]").append(opt);
                }
            });
        });
    });
</script>

如何让 jquery 与我的 UpdatePanel 一起工作，以便正常工作？

这是我的aspx代码：

            <asp:UpdatePanel runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <table>
        <tr>
            <td class="h4" colspan="2">
                <asp:Label ID="Label1" runat="server" Text="Name and Address of Property Where Incident Occurred:"></asp:Label>
            </td>
        </tr>
        <tr>
            <td class="h4">
                <asp:Label ID="lblPropName" runat="server" Text="Name:"></asp:Label>
            </td>
            <td>
                <asp:DropDownList ID="ddlPropName" runat="server" OnSelectedIndexChanged="ddlPropName_SelectedIndexChanged" AutoPostBack="True" Height="30px"></asp:DropDownList>
            </td>
        </tr>
        <tr>
            <td class="h4">
                <asp:Label ID="Label2" runat="server" Text="BU Number:"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtBUNum" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="h4">
                <asp:Label ID="Label3" runat="server" Text="Address1:"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtAddress1" runat="server"></asp:TextBox>
        </tr>
        <tr>
            <td class="h4">
                <asp:Label ID="Label4" runat="server" Text="Address2:"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtAddress2" runat="server"></asp:TextBox>
            </td>
        </tr>
        </table>
    <table>
        <tr>
            <td class="h4">
                <asp:Label ID="lblListTenants" runat="server" Text="List of Affected Tenants:"></asp:Label>
            </td>
        </tr>
        <tr>
            <td>
                <asp:ListBox ID="lstListTenants1" runat="server" Height="100px" Width="288px" SelectionMode="Multiple"></asp:ListBox>
            </td>
            <td>
                <input id="lstLeft" type="button" value="<<" />
                <input id="lstRight" type="button" value=">>" />
                <%--<asp:Button ID="btnLeft" runat="server" Text="<<" OnClick="btnLeft_Click" />
                <asp:Button ID="btnRight" runat="server" Text=">>" OnClick="btnRight_Click" />--%>
            </td>
            <td>
                <asp:ListBox ID="lstListTenants2" runat="server" Height="100px" Width="288px" SelectionMode="Multiple"></asp:ListBox>
            </td>
        </tr>
    </table>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="ddlPropName" EventName="SelectedIndexChanged" />
        </Triggers>
    </asp:UpdatePanel>

Answer 1

对于 updatepannels，由于它们执行部分回发，jquery 会在部分回发后失去绑定。在这种情况下，您需要在回发后重新绑定 jquery 函数。

var prm = Sys.WebForms.PageRequestManager.getInstance（）; prm.add_endRequest（function （s， e） { 在此处调用您的函数 });