Сравнение использования памяти браузера: встроенный onClick и JQuery .bind()

Поскольку вам нужно не только общее решение с некоторыми объектами-контейнерами, но и решение для jqGrid, я могу предложить вам еще один способ.

Проблема в том, что jqGrid уже делает несколько привязок onClick. Таким образом, вы не потратите больше ресурсов, если просто воспользуетесь существующим в jqGrid обработчиком событий. Вам могут пригодиться два обработчика событий: onCellSelect и beforeSelectRow. Чтобы иметь поведение, максимально близкое к тому, что у вас есть сейчас, я предлагаю вам использовать beforeSelectRow событие. Преимущество заключается в том, что если пользователь нажмет одну из ваших пользовательских кнопок, выбор строки может остаться неизменным. С помощью onCellSelect сначала будет выбрана строка, затем вызывается обработчик события onCellSelect.

Вы можете определить столбцы с помощью таких кнопок, как следующие

{ name: 'add', width: 18, sortable: false, search: false,
  formatter:function(){
      return "<span class='ui-icon ui-icon-plus'></span>"
  }}

В приведенном выше коде я использую пользовательский форматировщик jqGrid, но без привязки событий. Код

beforeSelectRow: function (rowid, e) {
    var iCol = $.jgrid.getCellIndex(e.target);
    if (iCol >= firstButtonColumnIndex) {
        alert("rowid="+rowid+"\nButton name: "+buttonNames[iCol]);
    }

    // prevent row selection if one click on the button
    return (iCol >= firstButtonColumnIndex)? false: true;
}

где firstButtonColumnIndex = 8 и buttonNames = {8:'Add',9:'Edit',10:'Remove',11:'Details'}. В вашем коде вы можете заменить alert на соответствующий вызов функции.

Если вы хотите всегда выбирать строку при нажатии кнопки, вы можете упростить код до следующего

onCellSelect: function (rowid,iCol/*,cellcontent,e*/) {
    if (iCol >= firstButtonColumnIndex) {
        alert("rowid="+rowid+"\nButton name: "+buttonNames[iCol]);
    }
}

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

Я рекомендую вам дополнительно всегда использовать gridview:true, которые ускоряют сборку jqGrid, но которые нельзя использовать, если вы используете функцию afterInsertRow, которую вы рассматривали как вариант.

Демонстрацию можно посмотреть здесь.

ОБНОВЛЕНО. Еще один вариант, который у вас есть, — использовать formatter:'actions' см. демонстрация подготовлена ​​для ответа. Если вы посмотрите на код средства форматирования «действий», он будет работать в основном так же, как ваш текущий код, если вы посмотрите на него со стороны привязки событий.

ОБНОВЛЕНО 2: обновленную версию кода вы можете увидеть сюда.

Вы должны использовать метод .delegate() для привязки обработчика одного клика для всех элементов через jQuery к родительскому элементу. элемент всех кнопок.

Для различных параметров вы можете использовать атрибуты data- для каждого элемента и получать их с помощью метода .data().

Рассматривали ли вы возможность использования delegate()? У вас будет один обработчик для элемента контейнера, а не сотни. Что-то вроде этого:

$('#container').delegate('.your_buttons','click',function(e){
  e.preventDefault();
  var your_param = $(this).data('something'); // store your params in data, perhaps
  do_something_with( your_param );
});

Предполагая общую компоновку следующим образом:

<div id="container">
  <!--- stuff here --->
  <a class="your_buttons" href="#" data-something="foo">Alpha</a>
  <a class="your_buttons" href="#" data-something="bar">Beta</a>
  <a class="your_buttons" href="#" data-something="baz">Gamma</a>
  <a class="something-else" href="#" data-something="baz">Omega</a>
  <!--- hundreds more --->
</div>