Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   что правильнее: куча .on() или куча hasClass()? (https://javascript.ru/forum/jquery/59880-chto-pravilnee-kucha-ili-kucha-hasclass.html)

Floyd 01.12.2015 17:05

что правильнее: куча .on() или куча hasClass()?
 
есть кнопки: "добавить", "изменить", "удалить".
<button class="add action" type="button">+</button>
<button class="edit action" type="button">/</button>
<button class="del action" type="button">-</button>

при нажатии обрабатываются параметры, после чего запрос в базу.
как правильнее: привязать on на все кнопки:
.on("click", "button.add", function(event) {
	...			
})
.on("click", "button.edit", function(event) {
...			
})
.on("click", "button.del", function(event) {
	...			
})
.on("click", "button.action", function(event) {
	ajax(...);
})

или один .on и куча hasClass:
.on("click", "button.action", function(event) {
o_this = $(this);
if (o_this.hasClass("add")) {
	...
}
if (o_this.hasClass("edit")) {
	...
}
if (o_this.hasClass("del")) {
	...
}
ajax(...);

})

?
может есть более интеллигентное решение для такой задачи?
спасибо!

Vlasenko Fedor 01.12.2015 17:27

<div id="action">
    <button class="add" type="button">+</button>
    <button class="edit" type="button">/</button>
    <button class="del" type="button">-</button>
</div>

$("#action").on("click", "button", function(){
alert(this.className);
});

Так лучше будет

Floyd 01.12.2015 17:49

у меня именем класса определяется какие именно параметры и как собирать. в кнопке бывает 1-2 класса для этого и 1-2 класса для CSS.

laimas 01.12.2015 19:25

Цитата:

Сообщение от Floyd
button class="add action" type="button"

А какой иной тип кроме button еще может быть у кнопки? В данном случае указание типа бессмысленно.

Barbos 01.12.2015 21:16

Я бы сделал три варианта на клик трех разных кнопок. В каждом сначала собрал данные для ajax запроса(или определил отдельную функцию, если код повторяется), а затем вызвал определенную функцию с этими параметрами, которая делает ajax запрос.
.on("click", "button.add", function(event) {
// сбор данных
	...	
sendAjax(param);
})
.on("click", "button.edit", function(event) {
// сбор данных
	...	
sendAjax(param);		
})
.on("click", "button.del", function(event) {
// сбор данных
	...	
sendAjax(param);		
})

function sendAjax(param){
...
}

Floyd 02.12.2015 11:39

так почти и сделано.
вопрос в том, что оптимальнее: вешать несколько делегированных обработчиков, ждущих всё время появления и нажатия подходящих кнопок, или один обработчик, а внутри разрулить hasClassами?


Часовой пояс GMT +3, время: 06:21.