Question

$('a').each(function() {
    var clicked = false;
    $(this).bind('click', function() {
        if(!clicked) return !(clicked = true);
    });
});

Hi all. I’m trying to figure out how to apply this function to only <a> elements that also contain a class called touch. In other words:

function is applied to this:

<a href="#" class="touch">

function is not applied to this:

<a href="#">

Sorry, I’m a jQuery newb.

Answer 1

You need a class selector (combined with your current element selector):

$('a.touch').each(function() {
    var clicked = false;
    $(this).bind('click', function() {
        if(!clicked) return !(clicked = true);
    });
});

It’s worth having a read through the jQuery API (in particular the selectors section). It will save you a lot of time later on!

It’s also worth remembering that the majority of jQuery selectors are the same as the CSS selectors. If you know anything about CSS, you can apply that knowledge to jQuery too.

---

On a separate note, since most jQuery methods apply to every element in the matched set, you can probably get rid of your each loop. If I’ve understood correctly, you are trying to prevent every a.touch element from following the link the first time it is clicked. If that’s right, then you can just do this:

$('a.touch').one("click", function() {
    return false; 
});

​