У меня есть скрипка https://jsfiddle.net/3azcbye3/2/, которая показывает точный сценарий, который я уже сталкивался.

Я хочу знать, почему, когда я делаю $('[data-prototype]').each, я не могу обновить атрибут данных с помощью $(this).data('prototype', value), а вместо этого мне нужно использовать $(this).attr('data-prototype', value).

Когда событие щелчка позже захватывает прототип с .data('prototype'), это как если бы оно захватило значение DOM, а не значение, которое должно быть обновлено в локальной переменной jQuery. Насколько я понял .attr против .data, я ожидал обратного между ними.

Изменить: после реализации упрощенной версии фрагмента события в скрипке, похоже, он работает должным образом. В других моих библиотеках должно быть что-то, вызывающее конфликт.

3
Steve Buzonas 27 Май 2015 в 09:55
1
Возможный дубликат данных jQuery vs Attr?
 – 
Wesley Murch
27 Май 2015 в 09:59
У вас есть лишний `});` в конце. ваш код не работает
 – 
Royi Namir
27 Май 2015 в 10:00
Спасибо, пропустил, когда вырезал обертку, которая не меняет влияние кода.
 – 
Steve Buzonas
27 Май 2015 в 10:02

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>

Если взять результаты вне всякого сравнения , оба они идентичны:

enter image description here

2
Royi Namir 27 Май 2015 в 10:07
Когда я console.log в цикле, это то, что я ожидал, но когда событие позже захватывает .data('prototype'), это как если бы оно захватило его из dom, чего я ожидал бы с .attr из-за разных мест хранения между ними.
 – 
Steve Buzonas
27 Май 2015 в 10:10