JQuery do different thing based on different selector using .on() method

Question

I have several different tasks that may need some optimization:

$('.container').on('click', '.one', function () {
  // do task one
});

$('.container').on('click', '.two', function () {
  // do task two
});

$('.container').on('click', '.three', function () {
  // do task three
});

Merged into the following:

$('.container').on('click', '.one, .two, .three', function () {
  // How to selectively perform each task, based on the trigger/ selector?
  // Think of if (event.type === 'mouseenter') // do sumthing
});

The question is how to selectively perform each different task, based on each trigger/ selector? Or is there a better way to perform this?

Thanks

I don't get why you propose `if (event.type === 'mouseenter')` if want changes the task in your above code is the element, and not the event. You only have click events. — Diego, Nov 22 '12 at 14:22

score 8 · Answer 1 · answered Nov 22 '12 at 14:22

8

A better approach may just be to chain the .on() calls:

$('.container').on('click', '.one', function () {
    // do task one
}).on('click', '.two', function () {
    // do task two
}).on('click', '.three', function () {
    // do task three
});

Doing it this way would remove the extra processing required to check whether the element has a certain class each time the event handler is triggered.

answered Nov 22 '12 at 14:22

James Allardice

164,175
21
332
312

2

Not to mention looks far more elegant – Esailija Nov 22 '12 at 14:24
Like it. But the bad side is that each event not binded directly to its element has some cost. This way each time some element in container is clicked, jQuery will be asking if the element is `'.one'` or `'.two'` or `'.three'`. The only difference is that we wont see it. – Diego Nov 22 '12 at 14:28

score 6 · Accepted Answer · answered Nov 22 '12 at 14:21

6

$('.container').on('click', '.one, .two, .three', function () {
  if ($(this).hasClass("one")) {
    // do task one
  }
  if ($(this).hasClass("two")) {
    // do task two
  }
  if ($(this).hasClass("three")) {
    // do task three
  }
});

answered Nov 22 '12 at 14:21

Diego

16,436
26
84
136

Does $(this) refer to each iteration of selector here? Thanks – swan Nov 22 '12 at 14:22
`$(this)` refers to the element that was clicked. – Diego Nov 22 '12 at 14:23
@roasted, no, it shoudn't. The question doesn't specify that an element can have one only class! – Diego Nov 22 '12 at 14:25

score 3 · Answer 3 · answered Nov 22 '12 at 14:22

3

You can use hasClass method:

$('.container').on('click', '.one, .two, .three', function () {
  var $this = $(this);
  if ($this.hasClass('one')) {
     // 
  } else if ($this.hasClass('two')) {
     //
  } else {
    //
  }
});

answered Nov 22 '12 at 14:22

Ram

143,282
16
168
197

1

If some element has more than one class this code will bahave different from the original. – Diego Nov 22 '12 at 14:23

JQuery do different thing based on different selector using .on() method

3 Answers3