在更新面板內的轉發器內的用戶控件內創建的JQuery函數不起作用

Question

當我將用戶控件移到轉發器之外並（仍在更新面板中）手動傳遞其屬性而不是使用轉發器時，一切正常。 但是，當我使用轉發器將屬性傳遞給用戶控件時，該用戶控件會從數據庫中正常加載，並出現在最終客戶端頁面上，該頁面顯示那些參數（PID，StID）已成功傳遞，但其jQuery函數停止工作。 因此，jQuery在轉發器之外也可以正常工作。

我嘗試過的事情：

1. 因為他們說中繼器弄亂了元素的唯一ID，所以我改用了class。 這沒有用。 我還為類和元素ID使用了唯一的ID，這也不起作用。 現在，我在中繼器中為類使用唯一名稱，因為我的PID是GUID，並且在那里為類名稱構造了唯一的名稱。

2. 將myusercontrol從轉發器中移出。 這可行。

3. 我創建了另一個頁面，然后將屬性手動賦予了用戶控件。 這很好。

4. 我寫了一個與您在帖子中看到的腳本相似的腳本，但是在轉發器之外，只是將我的元素隱藏並顯示在轉發器內的用戶控件內。 但這也沒有用！ 盡管我在最終頁面上看到了用戶控件，但我什至無法在最終頁面>查看源代碼中看到用戶控件的html輸出（我想MS使用不同的機制來隱藏它們）。 除非我將用戶控件放置在轉發器之外，或者使用chrome dev工具，否則我可以看到用戶控件的html輸出。 我不確定這是否與此有關。

MyPage.aspx

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
    <asp:Panel ID="Panel1" runat="server" Height="49px" Style="margin-left: 211px">
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSrc1" ViewStateMode="Enabled" EnableViewState="False">
                            <ItemTemplate>
                                <div id='FC<%# Eval("PID")%><%# Eval("SID")%>'>
                                    <UserControl:MView runat="Server" PelID='<%#Eval("PID")%>' StID='<%#Eval("SID") %>' ID="Mview1" ViewStateMode="Enabled" EnableViewState="False" />                            
                                </div>
                            </ItemTemplate>
                        </asp:Repeater>
                        <asp:SqlDataSource ID="SqlDataSrc1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString2 %>" SelectCommand="SELECT PID, SID FROM [fc] LEFT JOIN [pt] ON [pt].ID = [fc].PID WHERE ([pt].[TID] = @TID)">
                            <SelectParameters>
                                <asp:ControlParameter ControlID="TreeView1" Name="TID" PropertyName="SelectedValue" DefaultValue="5AF4D771-9DA9-46B9-8075-200DF8652063" Type="String" />
                            </SelectParameters>
                        </asp:SqlDataSource>  
           </ContentTemplate>    
            </asp:UpdatePanel>           
        </asp:Panel>

User.Ascx

    $(document).ready(function () {
       $("body").on( 'click', "#front<%= PID.ToString()%><%=StID.ToString()%>",function (e) {
           alert('test');
           $("div.divBC<%= PID.ToString()%><%=StID.ToString()%>").hide();
            $("div.divCF<%= PID.ToString()%><%=StID.ToString()%>").show();
           e.preventDefault();
           e.disablePopup();
           return false;

        });

        $("body").on('click', "#back<%= PID.ToString()%><%=StID.ToString()%>", function (e) {
            alert("before Back");
            $("div.divCF<%= PID.ToString()%><%=StID.ToString()%>").hide();
            $("div.divBC<%= PID.ToString()%><%=StID.ToString()%>").css('visibility', 'visible');
            $("div.divBC<%= PID.ToString()%><%=StID.ToString()%>").show();
            e.preventDefault();
            e.disablePopup();
            return false;
        });
    });


</script>
    <table style="width: 100%;">
        <tr>
            <td>
                <asp:Label ID="Lable1" runat="server" Text="--"></asp:Label></td>
            <td>
                <asp:Label ID="Label2" runat="server" Text="--"></asp:Label></td>
            <td>
                <asp:Label ID="Label3" runat="server" Text="--"></asp:Label></td>
        </tr>
        <tr>
            <td colspan="3" >
                <hr style="color: #C0C0C0" />
                <span>
                    Time: 
                    <asp:Literal runat="server" ID="SpecialTime"></asp:Literal>
                    &nbsp;&nbsp;&nbsp;
                    Last Time : [under construction! ]
                    <asp:Literal runat="server" ID="OtherThings"></asp:Literal>
                </span>
                <hr />
                <div class="divCF<%= PID.ToString()%><%=StID.ToString()%>">
                    <hr/>
                    <h3>
                        <span>                            
                            <br />
                            <asp:Literal runat="server" ID="Title"></asp:Literal>
                        </span>
                    </h3>
                </div>
                <div class="divBC<%= PID.ToString()%><%=StID.ToString()%>" style="visibility:hidden">                    
                    <asp:Literal runat="server" ID="TextCnt"></asp:Literal>
                    <input type="hidden" value="<%= PID.ToString() %>" id="PDHolder"/>
                    <input type="hidden" value="<%= StID.ToString() %>" id="StIDHolder"/>
                    <hr/>
                </div>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;           
                <button id="front<%= PID.ToString()%><%=StID.ToString()%>">Front</button>
                <button id="back<%= PID.ToString()%><%=StID.ToString()%>">Back</button> 
            </center>
            </td>
            <td>&nbsp;</td>
        </tr>
    </table>

Answer 1

重復

<button id="front">

和

$("body").on( 'click', "#front",function (e)

混合不好。

另一件事。 您必須在頁面中僅包含一次jQuery javascript。