Why does my code to update data attributes not work?

Question

I have the following code:

<div 
    class="continueReading" 
    data-skip="0" 
    data-categories="22,243" 
    data-is="single" 
    data-s="cd1f2f7a7d" 
    data-list="latestNews-sidebar-1"
>
    <a href="javascript:void();" class="latestNewsWidgetMoreLink">get more</a>
    <a href="javascript:void();" class="latestNewsWidgetMoreButton">»</a>
</div>

$('.latestNewsWidgetMoreLink, .latestNewsWidgetMoreButton').click(
    function()
    {    
        total_items = 10;
        $(this).parent('div').attr('data-skip', total_items);
    }
);

but seems don't work. Can somebody to help me? Is there any error in this code?

Note: I have also try the following code with no luck:

total_items = 10;
$(this).parent('div').data('skip', total_items);

As Adil said, show us the HTML. Also show us the function(s) surrounding those few lines - hard to work out if there's an issue if we don't know what this is in the context of the code. — Anthony Grist
– Anthony Grist, Commented Feb 13, 2013 at 9:09
How are you expecting to know if it's worked if you're setting the value of the data attribute to the same thing? — Anthony Grist
– Anthony Grist, Commented Feb 13, 2013 at 9:13
Even in this code doesn't work (note have change the value of the div data attribute) — KodeFor.Me
– KodeFor.Me, Commented Feb 13, 2013 at 9:14
Where's the script located in relation to the HTML document - in the <head> tag, somewhere in the <body> tag, just before the </body> tag? It may be executing before the elements exist, in which case you'd need a DOM ready handler. — Anthony Grist
– Anthony Grist, Commented Feb 13, 2013 at 9:20

Anthony Grist · Accepted Answer · 2013-02-13 09:31:55Z

1

The code works for me in this example jsFiddle. I suspect the code is executing too early, and as a result the click event handlers aren't being bound to the elements (because they don't exist yet). Try wrapping it in a $(document).ready() call:

$(document).ready(function () {
    $('.latestNewsWidgetMoreLink, .latestNewsWidgetMoreButton').click(function () {
        total_items = 10;
        $(this).parent('div').data('skip', total_items);
    });
});

That will ensure the code doesn't execute until the DOM is ready, so the elements will exist and can have event handlers bound.

Note that I've made a couple of adjustments:

Removed the semi-colons from the href attributes of the <a> elements - was causing a JavaScript syntax error
Using the .data() jQuery function rather than .attr()

edited Feb 13, 2013 at 9:31

answered Feb 13, 2013 at 9:25

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

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

Comments

Devang Rathod · Accepted Answer · 2013-02-13 09:19:08Z

1

Remove javascript:void(); from both link and then inspect HTML DIV with firebug and click on link , it will set data-skip="10";

answered Feb 13, 2013 at 9:19

Devang Rathod

6,7342 gold badges25 silver badges32 bronze badges

Comments

Panos Bariamis · Accepted Answer · 2013-02-13 09:29:30Z

1

The code works fine. See this. The second link won't work because you have forgot the dot in the jQuery selector. So you have to change

$('.latestNewsWidgetMoreLink, latestNewsWidgetMoreButton')

in

$('.latestNewsWidgetMoreLink, .latestNewsWidgetMoreButton')

answered Feb 13, 2013 at 9:29

Panos Bariamis

4,6697 gold badges41 silver badges63 bronze badges

1 Comment

KodeFor.Me Over a year ago

Sorry @pbaris, but I had a mistake in my code above. In my real code, I have the (.) before the latestNewsWidgetMoreButton. Thanks a lot for your assistance :)

Collectives™ on Stack Overflow

Why does my code to update data attributes not work?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related