Jquery Attribute selector click

Question

I'am trying to select a div with a specific attribute. I want the div to be clicked only if there is a specific attribute with a true value.The problem is that if i click the div again the alert still shows up whereas it has the attribute with false value.

HTML

<a href="#" data-spinner="true">Click Here</a>

Jquery

$("a[data-spinner='true']").click(function() {
        $("a[data-spinner='true']").attr("data-spinner",false);
    alert("clicked");
});

Answer 1

The issue with your current code is that you attach the event when the element has the attribute. The fact you change the attribute afterwards does not remove that event handler, so it is always called.

There are several ways to fix this.

The first is to use a delegated event handler, which will always account for the current attribute value:

$(document).on('click', 'a[data-spinner="true"]', function() {
    $(this).attr("data-spinner", false);
    alert("clicked");
});

Another method is to check the state of the attribute within the click handler itself:

$("a[data-spinner]").click(function() {
    if ($(this).data('spinner')) {
        $(this).data('spinner', false)
        alert("clicked");
    });
});

Note that this method allows you to use the data() method which is considered better practice.

You could also remove the event handler using off() on the first click, or just use one() to attach the event - depending on the other logic in the page which sets the data attributes' value.

Answer 2

jQuery doesn't redeclare the event when you change the value of data-spnner. You must programatically handle that instead, like so:

$("a[data-spinner]").click(function() {
    var $this = $(this);

    if($this.data('spinner')){
        alert("clicked");
    }

    $this.data('spinner',false);    
});

Answer 3

I'd add to Rory McCrossan's answer that, accordingly to this, you also should unset the attribute using removeAttr:

$("a[data-spinner='true']").removeAttr("data-spinner");