jQuery .data ()는 작동하지 않지만 .attr ()은 작동합니다.
이것에 대해 더 구체적이지 않은 것을 용서하십시오. 이상한 버그가 있습니다. 다큐먼트로드 후, 루프 일부 요소 원래 가지고 그 data-itemname="", 내가 사용하여 그 값을 설정합니다 .attr("data-itemname", "someValue").
문제 : 나중에 이러한 요소를 반복 할 때,하면을 elem.data().itemname얻지 ""만 elem.attr("data-itemname"),하면 "someValue". jQuery의 .data()getter는 처음에 일부 값을 포함하도록 설정된 요소 만 가져 오지만 원래 비어 있고 나중에 설정되면 .data()나중에 값을 가져 오지 않는 것과 같습니다.
이 버그를 재현하려고 시도했지만 할 수 없었습니다.
편집하다
버그를 재현했습니다! http://jsbin.com/ihuhep/edit#javascript,html,live
또한, 위 링크의 스 니펫 ...
JS :
var theaters = [
{ name: "theater A", theaterId: 5 },
{ name: "theater B", theaterId: 17 }
];
$("#theaters").html(
$("#theaterTmpl").render(theaters)
);
// DOES NOT WORK - .data("name", "val") does NOT set the val
var theaterA = $("[data-theaterid='5']");
theaterA.find(".someLink").data("tofilllater", "theater5link"); // this does NOT set data-tofilllater
$(".someLink[data-tofilllater='theater5link']").html("changed link text"); // never gets changed
// WORKS - .attr("data-name", "val") DOES set val
var theaterB = $("[data-theaterid='17']");
theaterB.find(".someLink").attr("data-tofilllater", "theater17link"); // this does set data-tofilllater
$(".someLink[data-tofilllater='theater17link']").html("changed link text");
HTML :
<body>
<div id="theaters"></div>
</body>
<script id="theaterTmpl" type="text/x-jquery-tmpl">
<div class="theater" data-theaterid="{{=theaterId}}">
<h2>{{=name}}</h2>
<a href="#" class="someLink" data-tofilllater="">need to change this text</a>
</div>
</script>
작업 할 때 나는 며칠 전 비슷한 "버그"로 실행 .data()및 .attr('data-name')HTML5 데이터 속성에 대해.
설명하는 동작은 버그가 아니라 의도적으로 설계된 것입니다.
.data()호출은 특별하다 -뿐만 아니라 그것은 HTML5 데이터를 검색 않습니다 그것은 또한 / 평가 속성을 구문 분석하는 시도를 속성. data-myjson='{"hello":"world"}'따라서을 통해 검색 될 때 와 같은 속성을 사용 .data()하면 Objectwhile 검색을 통해 .attr()문자열을 반환합니다. jsfiddle 예제를 참조하십시오.
이후 .data()추가 처리 jQuery를 저장에게 속성 평가 결과를 수행에 $.cache- 결국, 데이터 속성이 평가 된 후에는 낭비입니다마다에 재평가 .data()전화 - 데이터 변수가 복잡한 JSON 문자열을 포함 할 수 있습니다 특히 때문이다.
I said all that to say the following: After retrieving an attribute via .data() any changes made by .attr('data-myvar', '') will not be seen by subsequent .data() calls. Test this out on jsfiddle.
To avoid this problem don't intermix .data and .attr() calls. Use one or the other.
This is the result of a misunderstanding: data is NOT an accessor for data-* attributes. It's both more and less than that.
data is an accessor for jQuery's data cache on the element. That cache is initialized from data-* attributes if there are any present, but data never writes to the attributes, nor does changing the attribute change the data cache after initialization:
const div = $("[data-example]");
console.log('div.data("example"):', div.data("example"));
console.log('div.attr("data-example"):', div.attr("data-example"));
console.log('Using div.data("example", "updated")');
div.data("example", "updated");
console.log('div.data("example"):', div.data("example"));
console.log('div.attr("data-example"):', div.attr("data-example"));<div data-example="initial value"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>data also massages what it finds in various ways, guessing at data types, making data("answer") on an element with data-answer="42" a number, not a string, or even parsing things as JSON if they look like JSON:
console.log(typeof $("[data-answer]").data("answer"));
console.log(typeof $("[data-json]").data("json"));
console.log(typeof $("[data-str]").data("str"));<div data-answer="42"></div>
<div data-json='{"answer":42}'></div>
<div data-str="example"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>If you want to use the attributes (both reading and setting them), use attr, not data. attr is an accessor for attributes.
That's because the attribute's name is data-itemname. You cannot use - in the shorthand obj.attribute notation (obj.data-itemname would be intepreted as "obj.data minus itemname").
Why don't you just use .data() everywhere?
You can also declare default values inline on the HTML, which is fine too.
<span data-code="pony">text</span>
and
$("span").data("code") == "pony" // true
if you want to change it you just do
$("span").data("code", "not-a-pony");
and to remove it altogether you could invoke
$("span").removeData("code");
you should really try and avoid using .attr("data-*"), I don't know why you'd want to do so anyways.
.attr("data-itemname", "someValue") modifies the DOM.
.data("itemname", "someValue") modifies the jQuery cache.
To get this working in following Javascript and in addition in CSS you have to set both.
theaterA.find(".someLink").attr("data-itemname", "someValue");
theaterA.find(".someLink").data("itemname", "someValue");
You must set the data using .data('itemname', 'someValue');. Using .attr() to set data attributes won't work: http://jsfiddle.net/ThiefMaster/YHsKx/
However, you can provide inline values by using e.g. <div data-key="value"> in the markup.
I can see that this has brought up some division on how to approach the data attribute setting.
I too run into this problem and I found that the issue seemed to be simply the data attribute name formatting.
In my experience, you should avoid using hyphens in the data variable (the variable name that comes after "data-").
This didn't work for me:
[Markup]
<div class="list" id="myElement1" data-item-order="some-value"> .... </div>
[jQuery]
jQuery("#myElement1").data("item-order", "my-new-value");
But the following worked just fine! :) :
(I use an underscore instead of a hyphen when required)
[Markup]
<div class="list" id="myElement1" data-item_order="some-value"> .... </div>
[jQuery]
jQuery("#myElement1").data("item_order", "my-new-value");
I hope it helps. Cheers everyone!
참고URL : https://stackoverflow.com/questions/8707226/jquery-data-does-not-work-but-attr-does
'IT박스' 카테고리의 다른 글
| Swift readonly 외부, readwrite 내부 속성 (0) | 2020.08.25 |
|---|---|
| Java에서 파일 생성 날짜 결정 (0) | 2020.08.25 |
| IntelliJIdea 14 : 트리에서 제외 된 폴더 숨기기 (0) | 2020.08.25 |
| 단일 테스트 파일 실행 (0) | 2020.08.25 |
| 브라우저가 기본 인증 팝업을 호출하고 Jquery를 사용하여 401 오류를 처리하는 것을 방지하는 방법은 무엇입니까? (0) | 2020.08.24 |