Я новичок в jQuery, и у меня возникают проблемы с отображением событий нажатия кнопок в jQuery из кнопок, сгенерированных в ItemTemplate в репитере ASP.
Я потратил несколько (потраченных впустую) часов на поиск ответа, который будет работать, но пока не повезло.
Снимок с моей страницы.ASPX:
<asp:Repeater ID="rptJobs" runat="server">
<ItemTemplate>
<asp:Panel ID="Panel1" runat="server">
<table>
<tr>
<td>Desc:</td>
<td></td>
<td><%#Eval("DESCRIPTION")%></td>
</tr>
</table>
<asp:Button runat="server" ID="myBtn" Tag='<%# Eval("JOB_NO") %>' Text='Go' />
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
Сгенерированный HTML:
<div id="rptJobs_ctl00_Panel1">
<table>
<tr>
<td>Desc:</td>
<td></td>
<td>Test Data 1</td>
</tr>
</table>
<input type="submit" name="rptJobs$ctl00$myBtn" value="Go" id="rptJobs_ctl00_myBtn_0" Tag="MI0683" />
</div>
<div id="rptJobs_ctl01_Panel1">
<table>
<tr>
<td>Desc:</td>
<td></td>
<td>Test Data 2</td>
</tr>
</table>
<input type="submit" name="rptJobs$ctl01$myBtn" value="Go" id="rptJobs_ctl01_myBtn_1" Tag="MI0684" />
</div>
Теперь этот jQuery работает (указав сгенерированный идентификатор кнопки):
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$(function () {
$("#rptJobs_ctl00_myBtn_0").click(function () {
// This displays the text from the Tag element of the button...
alert($(this).attr("tag"));
});
});
});
</script>
Тем не менее, я хочу иметь возможность использовать общую функцию, которая будет вызываться для события click для всех сгенерированных кнопок - любая помощь оценивается!
Тед Х
Обратите внимание, что все имена заканчиваются myBtn
(значение, которое вы установили ID
). Поэтому используйте селектор jQuery, в котором вы выбираете элементы с именами, заканчивающимися на myBtn
:
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("[name$='myBtn']").click(function () {
alert($(this).attr("tag"));
return false;
});
});
</script>
... или ограничить выбор только входами: $("input[name$='myBtn']").click(function() {
...
Чтение: jQuery Селекторы
ОБНОВЛЕНИЕ: Как отметил Бартдуде, на самом деле его быстрее выбрать на классе. Вот несколько результатов, повторяющих 1000 раз по 1000 повторителей, используя тест, подобный этому ответу SO:
Используемые селектор:
by Class: $(".fakeClass")
by Name Limited to Input: $("input[name$='myBtn']")
by Name: $("[name$='myBtn']")
by Data Attr: $('[data-fakeAttr="me"]')
by ID Limited to Input: $("input[id*=myBtn]")
by ID: $("[id*=myBtn]")
Хром:
by Class: 281
by Name Limited to Input: 655
by Name: 687
by Data Attr: 515
by ID Limited to Input: 702
by ID: 858
IE 9:
by Class: 367
by Name Limited to Input: 1711
by Name: 3257
by Data Attr: 3779
by ID Limited to Input: 1663
by ID: 3695
Несколько более старый браузер, Safari 5:
by Class: 793
by Name Limited to Input: 925
by Name: 1023
by Data Attr: 983
by ID Limited to Input: 1005
by ID: 1242
Даже более старый браузер FireFox 3.6:
by Class: 1320
by Name Limited to Input: 2557
by Name: 2556
by Data Attr: 2272
by ID Limited to Input: 2726
by ID: 5458
$("[id*=myBtn]").click(function () {
// This displays the text from the Tag element of the button...
alert($(this).attr("tag"));
});
Или вы можете написать
myBtn.Attributes.Add("onClick", "return JavascriptMethod('" + ID.ToString() + "' );");
в.cs файл ItemDataBound Event.