У меня есть ~ 400 элементов на странице с привязанными к ним событиями щелчка (4 различных типа кнопок по 100 экземпляров каждой, события щелчка каждого типа выполняют та же функция, но с другими параметрами).
Мне нужно свести к минимуму любое влияние на производительность, которое это может иметь. Какое снижение производительности я получаю (память и т. Д.), Привязывая события щелчка к каждому из них по отдельности (с помощью JQuery bind ()
)? Было бы более эффективно иметь встроенный onclick
, вызывающий функцию на каждой кнопке?
Отредактируйте для пояснения:):
На самом деле у меня есть таблица (сгенерированная с помощью JQGrid), и в каждой строке столбцы данных, за которыми следуют 4 столбца значков «кнопка» - удалить и три другие бизнес-функции, которые выполняют обратные вызовы AJAX на сервер:
|id|description|__more data_|_X__|_+__|____|____| ------------------------------------------------- | 1|___data____|____data____|icon|icon|icon|icon| | 2|___data____|____data____|icon|icon|icon|icon| | 3|___data____|____data____|icon|icon|icon|icon| | 4|___data____|____data____|icon|icon|icon|icon|
Я использую специальный форматировщик JQGrid ( http://www.trirand.com/jqgridwsiki/doku.php?id=wiki:custom_formatter ) для создания значков «кнопок» в каждой строке (я не могу получить HTML-код кнопки с сервера).
Именно здесь, в моей пользовательской функции форматирования, я могу легко создать HTML-код значка и код во встроенном onclick
, вызывая соответствующие функции с соответствующими параметрами (данными из других столбцов в этой строке). Я использую данные в столбцах строк в качестве параметров для своих функций.
function removeFormatter(cellvalue, options, rowObject) {
return "";
}
Итак, я могу придумать два варианта:
custom_formatter ) для создания значков «кнопок» в каждой строке (я не могу получить HTML-код кнопки с сервера).
Именно здесь, в моей пользовательской функции форматирования, я могу легко создать HTML-код значка и код во встроенном onclick
, вызывая соответствующие функции с соответствующими параметрами (данными из других столбцов в этой строке). Я использую данные в столбцах строк в качестве параметров для своих функций.
function removeFormatter(cellvalue, options, rowObject) {
return "";
}
Итак, я могу придумать два варианта:
custom_formatter ) для создания значков «кнопок» в каждой строке (я не могу получить HTML-код кнопки с сервера).
Именно здесь, в моей пользовательской функции форматирования, я могу легко создать HTML-код значка и код во встроенном onclick
, вызывая соответствующие функции с соответствующими параметрами (данными из других столбцов в этой строке). Я использую данные в столбцах строк в качестве параметров для своих функций.
function removeFormatter(cellvalue, options, rowObject) {
return "";
}
Итак, я могу придумать два варианта:
1) inline onclick
, как я объяснил выше
--или -
2) delegate ()
(как указано в ответах ниже (большое вам спасибо!))
data ()
его параметры в событии afterInsertRow JQGrid. delegate ()
к кнопкам определенных классов (как сказал @KenRedler ниже) > $('#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 );
> }); //(code snippet via @KenRedler)
Я не уверен, насколько интенсивно используется браузер вариант № 2, я думаю ... но я мне нравится держать Javascript подальше от моих элементов DOM :)