Мне нужно передать дополнительные аргументы обработчику onclick. Я не могу решить, какой путь "лучше":

< Сильный > EDIT :
Контекст: у меня есть таблица, которая показывает список событий. В каждой строке есть кнопка «Удалить». Какой лучший способ передать recordId обработчику удаления?

$('a.button').click(function() {
    var recordId = $(this).metadata().recordId;
    console.log(recordId);
});
...
<tr>...<a class='{recordId:1} button'>delete</a></tr>
<tr>...<a class='{recordId:2} button'>delete</a></tr>

Или

function delete(recordId) {
    console.log(recordId);
}
...
<tr>....<a class='button' onclick='deleteRecord(1)'>Delete</a></tr>
<tr>....<a class='button' onclick='deleteRecord(2)'>Delete</a></tr>

Каковы плюсы и минусы для каждого варианта?

ПРИМЕЧАНИЕ. Я использую a.button в качестве пользовательской кнопки в стиле CSS, она не ведет себя как ссылка.

< Сильный > EDIT :
Буду признателен за альтернативные решения, если вы можете аргументировать преимущества предлагаемых альтернатив.

3
THX-1138 13 Авг 2010 в 23:50

4 ответа

Лучший ответ

Сохраняйте идентификатор записи как атрибут самого элемента, но вместо использования плагина метаданных, который хранит его в странном формате, я бы порекомендовал вам использовать атрибуты данных HTML5, которые также обратно совместимы.

Строка будет выглядеть так:

<tr> .. <a data-id="1">delete</a> .. </tr>

В обработчике получите значение атрибута и воздействуйте на него

function deleteRecord() {
    var rowId = $(this).attr('data-id');
    ...
}

Это сравнимо с использованием плагина метаданных, но он не перегружает атрибут class. Никаких дополнительных плагинов для этого не требуется. Он использует один обработчик, как и плагин метаданных, который эффективен для больших наборов данных.

Встроенные обработчики onclick плохи по тем же причинам. Новый обработчик создается для каждой строки. Это снижает гибкость и, как правило, является плохой практикой.

5
Anurag 13 Авг 2010 в 20:50
$('a.button').click(function() {
    var classes = $(this).attr('class').split(' ');
    var option;

    for( var i in classes )
    {
      if( classes[i].indexOf( 'option' ) != -1 )
      {
        option = classes[i].substr( 6 );
        break;
      }
    }

    console.log( option );
});
...
<a class='option-yes button'>Yes</a>    
<a class='option-no button'>No</a>
0
ovais.tariq 13 Авг 2010 в 19:58

Я бы просто использовал ваш второй подход - он самый простой, и в этом нет ничего плохого.

1
serg 13 Авг 2010 в 20:24

Изменить:
Похоже, вы динамически назначаете данные этим «кнопкам». Было бы лучше назначить данные кнопке с помощью метода .data() jQuery, а затем получить данные оттуда. Я обновил мой пример кода.

Если кнопки каждого типа выполняют разные действия, используйте разные обработчики для кнопок каждого типа:

$('a.button').click(function (e) {
  // Stuff with $(this).data().recordId
});

$ ('a.button.no'). click (function (e) {// Stuff});

...
<a class="button yes">Yes</a>
<a class="button no">No</a>
0
ntownsend 13 Авг 2010 в 20:26