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

Answer 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:

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