1

Basically, I want to use a class to select elements to receive delegated click event listeners. But I want to remove the class immediately after that.

This is what I had in mind: 

docSelector // $(window.document)
.on('click touchstart', btnSelector, click[name])
.queue(function() {
        // remove class to prevent extra binding
        $(btnSelector).removeClass(btnSelector);
 });

I think it should be clear what I am trying to do, but I'm not sure queue even works for this kind of thing. I'm not super familiar with jQuery, but am working on someone else's code who uses it liberally. Thanks in advance.

In other words, I guess I'm looking for a generic method for tacking a callback on the end of chain.

Bryce Johnson
  • 6,689
  • 6
  • 40
  • 51
  • 1
    Do you mean, after setting the event listener for whatever elements `btnSelector` refers to, you want to remove the class from some other elements so some other code does not add an event on them? If so you could just add a line after your `.on()` statement removing the classes: `$(".jc-click-"+name).removeClass("jc-click-"+name)`. Or do you mean you need to remove the class after the click listener has been triggered? – Patrick Evans Dec 29 '15 at 20:27
  • ah! this is it. I don't know why I didn't think of just expanding the click handler out into a function call where I can add whatever I need. Doh! Thank you! – Bryce Johnson Dec 29 '15 at 20:35
  • JK - what I was thinking doesn't actually work. `btnSelector` and `clickSel` are actually the same selector string. And yes, I want to remove the class after the click handler has been set. But now I realize I can't do that, because the event delegation will need to the class there. – Bryce Johnson Dec 29 '15 at 20:43
  • This is really a poor question on my part -- I should have thought this through further. – Bryce Johnson Dec 29 '15 at 20:44

1 Answers1

1

queue function depends on dequeue call. If you need to remove the class ASAP, you should do it in the specified click[name] function handler.

Also jQuery: more than one handler for same event

The handlers will execute in the order in which they were bound.

As jQuery event model allows multiple handlers on one element, therefore a later handler does not override an older handler.

You could do something like :

docSelector // $(window.document)
//Is executed first
.on('click touchstart', btnSelector, function(){
    // remove class to prevent extra binding
    var classSel = '.jc-click-' + name;
    $(classSel).removeClass(classSel);
})
//Is executed just after
.on('click touchstart', btnSelector, click[name]);
sdespont
  • 13,915
  • 9
  • 56
  • 97
  • Yeah, there are just many, many click[name] handlers, structured differently. – Bryce Johnson Dec 29 '15 at 20:33
  • Sorry, it wasn't clear in my answer that btnSelector and classSel are basically the same. So I didn't actually need to chain anything, just need to add break click[name] out into a generic fn, and handle the class removal on the line after. Thanks for taking the time though. – Bryce Johnson Dec 29 '15 at 20:37
  • JK - that isn't the solution. I spoke too soon. That would include the class removal in the click handler. – Bryce Johnson Dec 29 '15 at 20:41