Why can't I update the data attribute I am executing in jQuery?
I have this fiddle https://jsfiddle.net/3azcbye3/2/ that shows the exact scenario I ran into.
I want to know why, when I do $('[data-prototype]').each
, I cannot update the data attribute with $(this).data('prototype', value)
, but needs to be used instead $(this).attr('data-prototype', value)
.
When the click event later grabs the c prototype .data('prototype')
, it kind of grabs the DOM value, not the value that needs to be updated in the jQuery local variable. As far as I understood .attr
vs .data
, I would expect the opposite between the two.
Change: . After embedding the simplified version of the event snippet in the script, it works as expected. There must be something in my other libs causing a conflict.
source to share
Both codes return the same result
It:
$('[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'))
});
Profitability:
<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'))
});
Profitability:
<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 outside of the comparison, they are both identical:
source to share