Why can't I update a data attribute I'm iterating over in jQuery?

Question

I have this fiddle https://jsfiddle.net/3azcbye3/2/ that shows the exact scenario I've encountered.

I want to know why when I do a $('[data-prototype]').each I can't update the data attribute with $(this).data('prototype', value) but instead need to utilize $(this).attr('data-prototype', value).

When a click event later grabs the prototype with .data('prototype') it's as if it grabs the DOM value rather than the value that should be updated in the jQuery local variable. As far as I understood .attr vs .data I would have expected the inverse between the two.

Edit: After implementing a simplified version of the event piece in the fiddle, it appears to work as expected. There must be something in my other libs causing a conflict.

possible duplicate of [jQuery Data vs Attr?](http://stackoverflow.com/questions/7261619/jquery-data-vs-attr) — Wesley Murch, May 27 '15 at 06:59
@RoyiNamir thanks, missed that when i cut out the wrapper that doesn't change the affect of the code. — Steve Buzonas, May 27 '15 at 07:02

score 2 · Accepted Answer · answered May 27 '15 at 07:07

Both codes returns the same result

This :

$('[data-prototype]').each(function(i, element) {
    var prototype = $($(element).data('prototype'));
    prototype.find('label').each(function(l, label) {
      $(label).text('****'); //removed code for clarity
    });


    $(this).data('prototype', prototype[0].outerHTML);
    console.log( $(this).data('prototype'))
    });

Yields :

<div class="form-group"><label class="control-label required">****</label><div id="ew_ability_attributeComponents___name__"><div class="form-group"><label class="control-label" for="ew_ability_attributeComponents___name___attribute">****</label><select id="ew_ability_attributeComponents___name___attribute" name="ew_ability[attributeComponents][__name__][attribute]" class="form-control"><option value=""></option><option value="1">Reflexes</option></select></div><div class="form-group"><label class="control-label required" for="ew_ability_attributeComponents___name___composition">****</label><div class="input-group"><input type="text" id="ew_ability_attributeComponents___name___composition" name="ew_ability[attributeComponents][__name__][composition]" required="required" class="form-control"><span class="input-group-addon">%</span>
    </div></div></div></div>

And this code :

$('[data-prototype]').each(function(i, element) {
    var prototype = $($(element).data('prototype'));
    prototype.find('label').each(function(l, label) {
      $(label).text('****');
    });

    $(this).attr('data-prototype', prototype[0].outerHTML);
    console.log( $(this).attr('data-prototype'))
    });

Yields :

<div class="form-group"><label class="control-label required">****</label><div id="ew_ability_attributeComponents___name__"><div class="form-group"><label class="control-label" for="ew_ability_attributeComponents___name___attribute">****</label><select id="ew_ability_attributeComponents___name___attribute" name="ew_ability[attributeComponents][__name__][attribute]" class="form-control"><option value=""></option><option value="1">Reflexes</option></select></div><div class="form-group"><label class="control-label required" for="ew_ability_attributeComponents___name___composition">****</label><div class="input-group"><input type="text" id="ew_ability_attributeComponents___name___composition" name="ew_ability[attributeComponents][__name__][composition]" required="required" class="form-control"><span class="input-group-addon">%</span>
    </div></div></div></div>

Taking the results to beyond compare , both are identical :

enter image description here

When I console.log within the loop it's what I'd expect it to be, but when an event later grabs `.data('prototype')` it's as if it grabbed it from the dom, which I would expect that with `.attr` because of the different storage locations between the two. — Steve Buzonas, May 27 '15 at 07:10

Why can't I update a data attribute I'm iterating over in jQuery?

1 Answers1