在更新面板内的转发器内的用户控件内创建的JQuery函数无效

时间:2017-07-07 01:17:40

标签: javascript c# jquery asp.net

当我将用户控件移到转发器之外并且(仍然在更新面板内)手动传递其属性而不是使用转发器时,一切正常。但是,当我使用转发器将属性传递给我的用户控件时,用户控件从数据库中加载,并显示在最终客户端页面上,该页面显示这些参数(PID,StID)成功通过,但其jQuery函数停止工作。所以jQuery再次在转发器之外工作正常。

我尝试的事情:

  1. 因为他们说转发器弄乱了元素的唯一ID,所以我使用了类。这没用。我还使用了类和元素ID的唯一ID,这些ID也没有用。现在我在转发器中使用类的唯一名称,因为我的PID是一个GUID,我在那里为类名构造了独特的东西。

  2. 将myusercontrol移出转发器。这有效。

  3. 我创建了另一个页面,并手动为我的用户控件提供属性。这很好。

  4. 我写了一个类似的脚本,你在帖子中看到但在转发器之外只是隐藏并在转发器内的用户控件内显示我的元素。但那也行不通!我甚至无法在最终页面>视图源中看到用户控件的html输出(我猜MS使用不同的机制来隐藏它们)虽然我在最后一页上看到了用户控件!除非我把用户控件放在转发器之外或者我使用chrome dev工具然后我可以看到用户控件的html输出。我不确定它是否与此有关。

  5. 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>
    

1 个答案:

答案 0 :(得分:0)

重复

<button id="front">

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

不要好好混合。

另一件事。您必须在页面中只包含一次jQuery javascript。