jQuery 未找到 Asp.net 转发器交替项
jQuery is not finding Asp.net repeater alternating item
我的网络表单页面上有一个转发器,其中有一个列表。在绑定列表时,我还将一个 data-id 属性附加到 tr。问题是我需要在来自 jQuery 的 Web 服务调用中使用该 ID,我正在测试当我单击转发器项目中的按钮时是否可以通过记录 data-id 属性值来获取该 ID,但是从外观上看,它只记录 Item 而不是 Alternating item。
每次单击按钮一、三和五时都会记录它们,但是当我单击按钮二和按钮四时,控制台中不会记录任何内容。请参阅下面的代码。
转发器模板
<asp:Repeater runat="server" ID="rptList" OnItemDataBound="rptList_OnItemDataBound">
<HeaderTemplate>
<table>
</HeaderTemplate>
<ItemTemplate>
<tr runat="server" id="trList">
<td runat="server" id="tdList"></td>
<td runat="server" id="tdBtnRemove">
<asp:Button runat="server" ID="btnRemove" CssClass="btnRemove" Text="Remove" OnClientClick="return false;"/></td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr runat="server" id="trList">
<td runat="server" id="tdList"></td>
<td runat="server" id="tdBtnRemove">
<asp:Button runat="server" ID="btnRemove" Text="Remove" OnClientClick="return false;"/></td>
</tr>
</AlternatingItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
列表项
List<string> listObj = new List<string>(){"one", "two", "three", "four", "five"};
protected void rptList_OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
string listItem = (string) e.Item.DataItem;
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
HtmlTableRow trList = (HtmlTableRow)e.Item.FindControl("trList");
trList.Attributes.Add("data-id", listItem);
HtmlTableCell tdList = (HtmlTableCell)e.Item.FindControl("tdList");
tdList.InnerHtml = listItem;
}
}
jQuery按钮点击方法:
$(".btnRemove").click(function () {
var dataAttributVal = $(this).closest("tr");
var datA = dataAttributVal.data('id');
console.log(datA);
});
控制台结果:
如评论中所述,您的 AlternatingItemTemplate
缺少 CssClass="btnRemove"
属性。
因此,您的 $(".btnRemove").click(...
绑定不针对 AlternatingItemTemplate
中的按钮
我的网络表单页面上有一个转发器,其中有一个列表。在绑定列表时,我还将一个 data-id 属性附加到 tr。问题是我需要在来自 jQuery 的 Web 服务调用中使用该 ID,我正在测试当我单击转发器项目中的按钮时是否可以通过记录 data-id 属性值来获取该 ID,但是从外观上看,它只记录 Item 而不是 Alternating item。
每次单击按钮一、三和五时都会记录它们,但是当我单击按钮二和按钮四时,控制台中不会记录任何内容。请参阅下面的代码。
转发器模板
<asp:Repeater runat="server" ID="rptList" OnItemDataBound="rptList_OnItemDataBound">
<HeaderTemplate>
<table>
</HeaderTemplate>
<ItemTemplate>
<tr runat="server" id="trList">
<td runat="server" id="tdList"></td>
<td runat="server" id="tdBtnRemove">
<asp:Button runat="server" ID="btnRemove" CssClass="btnRemove" Text="Remove" OnClientClick="return false;"/></td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr runat="server" id="trList">
<td runat="server" id="tdList"></td>
<td runat="server" id="tdBtnRemove">
<asp:Button runat="server" ID="btnRemove" Text="Remove" OnClientClick="return false;"/></td>
</tr>
</AlternatingItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
列表项
List<string> listObj = new List<string>(){"one", "two", "three", "four", "five"};
protected void rptList_OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
string listItem = (string) e.Item.DataItem;
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
HtmlTableRow trList = (HtmlTableRow)e.Item.FindControl("trList");
trList.Attributes.Add("data-id", listItem);
HtmlTableCell tdList = (HtmlTableCell)e.Item.FindControl("tdList");
tdList.InnerHtml = listItem;
}
}
jQuery按钮点击方法:
$(".btnRemove").click(function () {
var dataAttributVal = $(this).closest("tr");
var datA = dataAttributVal.data('id');
console.log(datA);
});
控制台结果:
如评论中所述,您的 AlternatingItemTemplate
缺少 CssClass="btnRemove"
属性。
因此,您的 $(".btnRemove").click(...
绑定不针对 AlternatingItemTemplate