CODEWITHSUNDEEP
javascriptjqueryhtml
zaarr78
zaarr78

Reputation: 477

Jquery Attribute selector click

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");
});

Upvotes: 3

Views: 6464

Answers (3)

Simon
Simon

Reputation: 3730

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");

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

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.

Upvotes: 7

lenilsondc
lenilsondc

Reputation: 9800

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);    
});

Upvotes: 0

Related Questions