在更新面板内的中继器内的用户控件中创建的JQuery函数不起作用
在更新面板内的中继器内的用户控件中创建的JQuery函数不起作用
提问于 2017-07-07 01:17:40
当我将用户控件移到中继器之外并(仍然在更新面板中)手动传递其属性而不是使用中继器时，一切都正常。但是，当我使用中继器将属性传递给我的用户控件时，用户控件将从数据库中很好地加载，并显示在最终的客户端页面上，该页面显示这些参数(PID、StID)成功传递，但其jQuery函数停止工作。因此，同样，jQuery在中继器之外工作得很好。
我试过的事情：
- 因为他们说中继器混淆了元素的唯一ID，所以我使用了class。这是行不通的。我还为类和元素ID使用了唯一的ID，这也不起作用。现在，我在中继器内为类使用唯一的名称，因为我的PID是一个GUID，我在那里为类名构造了唯一的东西。
- 把我的用户控制移出中继器。这个很管用。
- 我创建了另一个页面，并手动将属性赋予我的用户控件。这个很好用。
- 我写了一个类似的脚本，你在帖子中看到，但在中继器外面，只是隐藏和显示我的元素在用户控制在中继器内。但那也没用！我甚至无法在最终的page>view源代码中看到用户控件的html输出(我猜MS使用了不同的机制来隐藏它们)，尽管我在最后一个页面上看到了用户控件！除非我将用户控件放在中继器之外，或者使用chrome工具，否则我可以看到用户控件的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>
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> </td>
<td>
<button id="front<%= PID.ToString()%><%=StID.ToString()%>">Front</button>
<button id="back<%= PID.ToString()%><%=StID.ToString()%>">Back</button>
</center>
</td>
<td> </td>
</tr>
</table>回答 1
Stack Overflow用户
发布于 2017-07-07 15:38:49
重复
<button id="front">和
$("body").on( 'click', "#front",function (e)不要混合得很好。
还有一件事。您必须在一个页面中只包含一次jQuery javascript。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44961109
复制相关文章
相似问题
腾讯云开发者
