2013-11-25 3 views
0

Я довольно новичок в jQuery, и у меня возникают проблемы с выбором событий нажатия кнопок в jQuery из кнопок, сгенерированных в ItemTemplate в репитере ASP.ASP Repeater - кнопка сгенерирована нажатием кнопки jQuery

Я потратил несколько (потраченных впустую) часов на поиск ответа, который будет работать, но пока не повезло.

надрез от Моей страницы .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 для всех сгенерированных bu ttons - любая помощь ценится!

Ted H

+1

Я бы предложил дать им общий класс css, чтобы вы могли использовать селектор классов из jQuery, предназначенный для всех кнопок, не зависящих от его идентификатора. В конце концов добавьте другой атрибут (или другой класс, но он не является чистым), чтобы идентифицировать щелчок «строка», если вы не хотите анализировать идентификатор. –

+0

попробуйте извлечь атрибут тега из кода позади. он может работать лучше без вмешательства jquery. – thenewseattle

+0

Спасибо Bartdude за то, что указали мне в правильном направлении. Мое исправленное объявление кнопки в моем файле .ASPX (добавление класса): ' ClientIDMode = "предсказуемый"/> Моя JQuery функция:. $ (" ххх") нажмите (функция() { оповещения ('here'); var t = $ (this) .attr ("tag"); alert (t); return false; }); Это работает! Благодарю. –

ответ

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() { ...

Reading: jQuery Selectors

UPDATE : Как упоминал Бартдуде, на самом деле его быстрее выбрать на классе. Вот некоторые результаты переборе 1000 раз через 1000 пунктов повторителя, используя тест, похожий на this SO answer:

селекторы Б:

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]") 

Chrome:

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.

Смежные вопросы