CODEWITHSUNDEEP
htmljquerycustom-data-attribute
KodeFor.Me
KodeFor.Me

Reputation: 13521

Why does my code to update data attributes not work?

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

Upvotes: 0

Views: 136

Answers (3)

Anthony Grist
Anthony Grist

Reputation: 38345

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:

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

Upvotes: 1

Panos Bariamis
Panos Bariamis

Reputation: 4653

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')

Upvotes: 1

Devang Rathod
Devang Rathod

Reputation: 6736

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

Upvotes: 1

Related Questions