jQuery not detecting recently added .data setter

Question

Here is the Fiddle: http://jsfiddle.net/3UzsU/

I'm having trouble getting jQuery to recognise the fact that I have changed the data attributes over to get and utilise the new values.

I am detecting the click like so:

$('[data-section="welcome"]').click(function() {
            $(this).html('Clicked');
            $(this).attr('data-section','expertise')
            $(this).attr('data-spaces','2')
});

Once that happens as you can see it changes the data-section and data-spaces, I am then detecting the new click like this:

$('[data-section="expertise"]').click(function() {
            $(this).html('Click me');
            $(this).attr('data-section','welcome')
            $(this).attr('data-spaces','1')
});

I also have this which tells me what is happening:

$('.someClass').click(function() {
    var spaces = $(this).data('spaces');
    var section = $(this).data('section');
    console.log('This number of spaces is: ' + spaces + ' and the section is: ' + section);
});

When I first click, the attributes in the inspector change and when I click again nothing happens. The output is always:

This number of spaces is: 1 and the section is: welcome

Can someone help me in getting the click event to register the new values and run whatever is in that function?

`data()` only pulls `data-` attribute values from the DOM once (the documentation says `the data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated`). Changes you make through `attr()` afterwards are not taken into account. Your title is misleading because you're never using `data()`'s setter form. — Frédéric Hamidi, Jul 07 '14 at 13:37
Related **[attr vs data](http://stackoverflow.com/q/7261619/3639582)** — Shaunak D, Jul 07 '14 at 13:38
@FrédéricHamidi Although [if `.removeData()` is called, it will go back to the `data-` DOM attribute](http://stackoverflow.com/questions/16615383/removedata-jquery-method-not-working). — Blazemonger, Jul 07 '14 at 13:52
@FrédéricHamidi I never said the attribute would be removed... ? I'm just describing a somewhat unusual scenario: if `.data('thing')` equals `oldvalue`, call `.removeData('thing')` followed by `.attr('data-thing',newvalue)`, and now `.data('thing')` will check the `data-` attribute anew and return `newvalue` instead. — Blazemonger, Jul 07 '14 at 14:01
@Blazemonger, true, I misunderstood your previous comment. You're right `removeData()` will update the cached copy with the attribute's value instead of removing it in this case, yes. — Frédéric Hamidi, Jul 07 '14 at 14:06

score 3 · Answer 1 · answered Jul 07 '14 at 13:42

3

There is a difference between jQuery's data() and attr(). The data method provides caching for variables so try to use one method instead of combine them. Also if you want to work with dynamic html and jQuery you must use jQuery's on() method.

DEMO

answered Jul 07 '14 at 13:42

Sjors van Dongen

470
3
13

This works perfectly in the Fiddle, However when I implement it into my site is outputs both the console.log()s at the same time. Any ideas what this could be? – DannieCoderBoi Jul 08 '14 at 10:06
Are you using the exact same code? Otherwise, try to reproduce the bug in a Fiddle. – Sjors van Dongen Jul 08 '14 at 14:00

guest271314 · Answer 2 · 2014-07-07T15:21:53.987

Try

$(document).ready(function () {
    $('.someClass').on("click", function (e) {
        function dataState() {
            return console.log('This number of spaces is: ' 
                               + $(e.target)[0].dataset.spaces 
                               + ' and the section is: ' 
                               + $(e.target)[0].dataset.section);
        };
        if ($(e.target)[0].dataset.spaces === "1") {
            $(e.target)[0].dataset.spaces = "2";
            $(e.target)[0].dataset.section = "expertise";
            $(e.target).html("clicked");
            dataState();
        } else {
            $(e.target)[0].dataset.spaces = "1";
            $(e.target)[0].dataset.section = "welcome";
            $(e.target).html("click me");
            dataState();
        };
    });
});

jsfiddle http://jsfiddle.net/guest271314/B7N3e/

jQuery not detecting recently added .data setter

2 Answers2