У меня есть 50 динамически генерируемых HTML-кнопок следующим образом:
<input type="button" id="btn1" name="myButton" value="Click Me" />
<input type="button" id="btn2" name="myButton" value="Click Me" />
:
:
:
<input type="button" id="btn50" name="myButton" value="Click Me" />
Как лучше всего назначить событие щелчка всем кнопкам с помощью jQuery?
Используя атрибут id или атрибут name?
Слушатели событий требуют памяти. Вы должны тщательно продумать, как вы должны реализовать слушателей.
<сильный>1. Прямой способ:
Не используйте это
Если поведение каждой кнопки одинаковое, используйте класс:
$(".btn").click(function() {
// Do something
});
Если поведение каждой кнопки отличается, назначьте события разным #ID.
$("#btn1").click(function {
// Do something
});
<сильный>2. Используйте .on():
jQuery 1.7 представил метод .on(), который объединяет всех слушателей в 1 метод.
$("button").on("click", function() {
// Do something
});
Тем не менее, мы по-прежнему привязываем многих слушателей к странице.
<сильный>3. Используйте обертку (используйте это!):
Оберните свои кнопки div и создайте для него один слушатель.
$("#wrapper").on("click", "button", function() {
// Do something
});
Полезные ресурсы:
Лучшим способом было бы делегировать окружающему контейнеру, таким образом, у вас будет только один слушатель, а не 50. Используйте .on()
Если вы должны назначить каждую кнопку, придумайте способ написать только один селектор, например:
$('button').click(function(){});
Обратите внимание, что ваш селектор может быть более конкретным, чтобы ориентироваться только на эти 50 кнопок, как указывает @Drewness в комментариях.
$('button') заключается в том, что на странице могут быть другие кнопки, которые не применяются.
- person Drewness; 27.02.2014
если у вас есть все кнопки внутри контейнера, и вы хотите использовать одну и ту же функцию для всех, добавьте обработчик кликов в контейнер
$("#container").on("click", function(e){
if(e.target.type =="button")
{
alert(e.target.id);
}
});
<div id="container">
<input type="button" id="test1" value="button1"/>
<input type="button" id="test2" value="button2"/>
<input type="button" id="test3" value="button3"/>
<input type="button" id="test4" value="button4"/>
<input type="button" id="test5" value="button5"/>
<input type="button" id="test6" value="button6"/>
something
<input type="text"/>
</div>
Это был бы простой способ обернуть все это в одно событие «включено» и сделать что-то на основе идентификатора кнопки;
<button id='button1'>button 1</button>
<button id='button2'>button 2</button>
<button id='button3'>button 3</button>
var mybuttons = $('#button1');
for(i=1;i<3;i++){
mybuttons = mybuttons.add($('#button'+i));
}
console.log(mybuttons);
mybuttons.on('click', function(){
var myid = $(this).attr("id");
console.log(myid);
//use a switch or do whatever you want with the button based on the id;
});
вот скрипт http://jsfiddle.net/gisheri/CW474/1/
Я бы применил его к родительскому элементу кнопок. Итак, если бы все кнопки были в <div id="myButtons">:
$('#myButtons').on('click', 'button' function () {
// Do stuff...
});
Ключ должен быть достаточно конкретным, чтобы вам не нужно было указывать каждый селектор, но не слишком теряться, так как на странице могут быть другие кнопки и т. д., которые вы не делаете. хочу включить.
Обновлен код для включения делегирования.
Я думаю, будет лучше, если вы будете использовать общее имя класса для всех и обрабатывать событие щелчка по этому имени класса.
$('.classname').click(function(){
//`enter code here`
});
Или вы можете обрабатывать событие по имени тега:
$('button').click(function(){
//'enter code here'
});
Этот метод может повлиять на работу других кнопок, не входящих в группу из 50 кнопок.
Пытаться
$(".btn").click(function() {
// Do something
});
Вы можете использовать следующий код:
$("#btn1").on("click",function(){
// Your code
});
$("#btn2").on("click",function(){
// Your code
});
и так далее...
