Какова наилучшая практика привязки события jQuery click к каждому тегу привязки в каждой строке таблицы.

Question

Существует таблица (только таблица html), в которой перечислены пользователи, и вы можете удалить определенного пользователя, нажав ссылку удаления. Обычный способ я делаю

<% foreach (var user in Model.Users) {%> 
<tr > 
    <td align="right"><%= user.Name %></td> 
    <td><%= user.Level %></td> 
    <td align="center"> 
    <a href="#" onclick="return deleteUser('<%= user.Name %>');"> 
     <%= Html.Image("trash.gif") %> 
    </a> 
    </td> 
</tr> 
<%)%> 

, но я хочу, чтобы прикрепить нажмите событие по ссылке в не навязчивым образом. Я имею в виду, что я не хочу указывать метод javascript внутри тега. Я не уверен, что это лучший способ достичь этого с помощью jQuery, связывая несколько множественных якорных тегов с передачей параметров.

Answer 1

Вы можете использовать метод delegate() на столе:

$('#tableId').delegate('a', 'click', function(e) { 
    e.preventDefault(); 
    // get the user name 
    deleteUser($(this).closest('tr').children(':first').text()); 
    // or give the cell that contains the name a class 
    // deleteUser($(this).closest('tr').children('.name').text()); 
}); 

Таким образом, вы только зарегистрировать один обработчик событий.

Answer 2

Для производительности и оптимизации вы можете прикрепить обработчик щелчка к этой таблице:

<table id="grid"> 
<% foreach (var user in Model.Users) {%> 
<tr > 
    <td class="name"><%= user.Name %></td> 
    <td><%= user.Level %></td> 
    <td align="center"> 
    <a href="#" class="delete"> 
     <%= Html.Image("trash.gif") %> 
    </a> 
    </td> 
</tr> 
<%)%> 
</table> 

$('#grid').click(function(e){ 
    var source = $(e.target); 
    if(source.is('.delete')){ //or source.hasClass('delete') 
     var user = source.closest('tr').find('td.name').text(); 
     deleteUser(user); 
     e.preventDefault(); 
    } 
});