jQuery changing data attribute

Question

I have three simple buttons.

<div class="enter-btn">Enter</div>

<div class="all-btn">All</div>


<div class="category-all">
    <div class="back-btn" data-action="">Back</div>
</div>

When you click on either Enter or All, it adds a data-action value to the Back button.

$(".enter-btn").bind("click", function() {
    $(".back-btn").attr("data-action", "search-home");
});

$(".all-btn").bind("click", function() {
    $(".back-btn").attr("data-action", "category-home");
});

$(".back-btn").bind("click", function() {
   alert($(this).data("action")); 
});

But if you click Enter first, then All the value on the Back buttons seems to hold the first value and not get the new one.

I've added a simple jsfiddle to show my issue.

http://jsfiddle.net/uCyJx/1/

Justin Bicknell · Accepted Answer · 2013-04-15 16:48:23Z

6

For changing the data attributes use the data function http://api.jquery.com/jQuery.data/:

$(".back-btn").data("action", "search-home");

answered Apr 15, 2013 at 16:48

Justin Bicknell

4,81620 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jako Over a year ago

Figured it was something simple I was overlooking. Thanks! Will accept as soon as it lets me

Collectives™ on Stack Overflow

jQuery changing data attribute

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related