jquery on click events

[shamai]

is this proper?
instead of grabbing an element and binding it with click i now use 2 classes.
class toggle and class click.
this way I can add it anywhere and as much as I want. Is that bad?

$(‘.click’).on(‘click’, function(){

//inner div.toggle opens
$(this).find(‘.toggle’).slideToggle();

}

return false;

});

[TheDoc]

I would say that using a class of ‘click’ is pretty bad, but otherwise this doesn’t look too bad.

[shamai]

well when I use jquery I use special classes. that way my javascript is neat.
I care more for my js being neat than my html because js can get cumbersome.

[JohnMotylJr]

If the amount of clicks will be ‘insignificant’ than you can simply use .click(function() {. I would agree with doc that the naming conventions are a quite un-semantic. Whenever i am using a lot of JS i normally give the element an id and prepend ‘js-‘.

I suggest you give this article a good read.

[CrocoDillon]

> If the amount of clicks will be ‘insignificant’ than you can simply use `.click(function() {`.

Please elaborate :P

[Historical Forums User]

.click ( );

example:

$('.foo').click(function () {

// do stuff here

});

[JohnMotylJr]

@CrocoDillon

From jQuery: Event Performance

[CrocoDillon]

Ah thanks, good read. I thought you meant `.click(…)` to be less efficient then `.on(‘click’,…)`. Ah well I agree that class names like ‘click’ are not semantic and I wouldn’t use it except in testing environment.

[shamai]

yeah but if I use class .toggle, I dont have to write anymore code!
I just add class toggle and bam! -that element now has jquery attached to it.
Its similar to oocss… I guess…
instead of having to put a few elements into the $(), i put one element (.toggle) and place toggle here and there. And its easy for me to search and see whats being toggled.

Otherwise im pretty semantic except for cf (clearfix) my html is pretty good…i think…

and click() just calls the function on(‘click’..) so I use on(‘click’) to begin with.

‘As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers….’

[Author]

Posts