javascript - 为什么我不能更新我在 jQuery 中迭代的数据属性？

Question

我有这个 fiddle https://jsfiddle.net/3azcbye3/2/这显示了我遇到的确切情况。

我想知道为什么当我执行 $('[data-prototype]').each 时，我无法使用 $(this).data( 'prototype', value) 但需要利用 $(this).attr('data-prototype', value)。

当点击事件稍后使用 .data('prototype') 获取原型(prototype)时，就好像它获取了 DOM 值而不是应该在 jQuery 局部变量中更新的值。据我了解，.attr vs .data 我本以为两者是相反的。

编辑:在 fiddle 中实现事件片段的简化版本后，它似乎按预期工作。我的其他库中一定有什么东西导致了冲突。

Answer 1

两个代码返回相同的结果

这个:

$('[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'))
    });

产量:

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

还有这段代码:

$('[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'))
    });

产量:

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

将结果超越比较，两者是相同的: