ASP Repeater - поймать сгенерированное нажатие кнопки в функции jQuery

0

Я новичок в 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 для всех сгенерированных кнопок - любая помощь оценивается!

Тед Х

  • 1
    Я бы предложил дать им общий класс CSS, чтобы вы могли использовать селектор классов из jQuery, предназначенный для всех кнопок независимо от его идентификатора. В конце концов добавьте еще один атрибут (или другой класс, но он не является чистым), чтобы идентифицировать «нажатую» строку, если вы не хотите анализировать идентификатор.
  • 0
    Попробуйте извлечь атрибут тега из кода. это может работать лучше без вмешательства jquery.
Показать ещё 4 комментария

2 ответа

0

Обратите внимание, что все имена заканчиваются 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
0
$("[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.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню