在更新面板内的转发器内的用户控件内创建的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。