jQuery .data()는 작동하지 않지만 .attr()는 작동합니다.
좀 더 구체적으로 말씀드리지 못한 점 양해 부탁드립니다.저는 정말 이상한 벌레가 있어요.문서가 로드된 후에, 나는 원래 있던 몇 가지 요소를 루프합니다.data-itemname=""이 값들은 다음과 같이 설정합니다..attr("data-itemname", "someValue").
문제: 나중에 해당 요소를 루프할 때, 루프할 경우elem.data().itemname알겠습니다""하지만 내가 한다면,elem.attr("data-itemname")알겠습니다"someValue"jQuery's..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()반환할 것입니다Object을 통해 검색하는 동안.attr()문자열을 반환합니다.jfiddle 예제를 참조하십시오.
부터.data()추가 처리 jQuery는 속성 평가 결과를 저장합니까?$.cache결국, 일단 데이터 속성이 평가되면, 모든 데이터 속성에 다시 의존하는 것은 낭비가 될 것입니다..data()호출 - 특히 데이터 변수에 복잡한 JSON 문자열이 포함될 수 있기 때문입니다.
저는 다음과 같은 말을 하기 위해 이 모든 것을 했습니다. 에 의해 변경된 내용을 통해 속성을 검색한 후에는 다음 호출에 표시되지 않습니다.jsfiddle에서 테스트해 보세요.
이 문제를 방지하려면 전화와 전화를 함께 사용하지 마십시오.둘 중 하나를 사용합니다.
이는 오해의 결과입니다. 은(는) 특성에 대한 액세스자가 아닙니다.그것은 그것보다 더 많고 덜합니다.
data요소에 있는 jQuery의 데이터 캐시에 대한 접근자입니다.해당 캐시는 다음에서 초기화됩니다.data-*속성(존재하는 경우), 그러나data속성에 쓰지 않으며, 속성을 변경해도 초기화 후 데이터 캐시가 변경되지 않습니다.
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또한 데이터 유형을 추측하고, 다양한 방법으로 발견된 것을 마사지합니다.data("answer")가 있는 요소에.data-answer="42" 경우할 수도 있습니다.
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>속성(읽기 및 설정 모두)을 사용하려면 , not을 사용합니다.attr 특성에 대한 접근자입니다.
.attr("data-itemname", "someValue")DOM을 수정합니다.
.data("itemname", "someValue")jQuery 캐시를 수정합니다.
Javascript를 따르고 CSS를 추가하여 이 작업을 수행하려면 둘 다 설정해야 합니다.
theaterA.find(".someLink").attr("data-itemname", "someValue");
theaterA.find(".someLink").data("itemname", "someValue");
속성의 이름이 다음과 같기 때문입니다.data-itemname당신은 수없다니습할을 사용할 수 .-obj.attribute표기법(obj.data-itemname은 "obj.data에서 항목 이름을 뺀 값"으로 해석됩니다.)
그냥 사용하는 게 어때요?.data()어디든?
HTML에서 기본값을 인라인으로 선언할 수도 있으며, 이 또한 괜찮습니다.
<span data-code="pony">text</span>
그리고.
$("span").data("code") == "pony" // true
당신이 그것을 바꾸고 싶다면 당신은 그냥 합니다.
$("span").data("code", "not-a-pony");
그리고 그것을 완전히 제거하기 위해 당신은 호출할 수 있습니다.
$("span").removeData("code");
당신은 정말로 사용을 피하려고 노력해야 합니다..attr("data-*")당신이 왜 그렇게 하고 싶어하는지 모르겠어요.
다음을 사용하여 데이터를 설정해야 합니다..data('itemname', 'someValue');.사용..attr()데이터 특성을 설정하면 작동하지 않습니다. http://jsfiddle.net/ThiefMaster/YHsKx/
그러나 예를 들어 인라인 값을 제공할 수 있습니다.<div data-key="value">
이것이 데이터 속성 설정에 접근하는 방법에 대해 어느 정도 분열을 일으켰다는 것을 알 수 있습니다.
저도 이 문제에 부딪혔는데, 문제가 단순히 데이터 속성 이름 형식 지정인 것 같습니다.
제 경험상 데이터 변수("data-" 뒤에 오는 변수 이름)에 하이픈을 사용하는 것은 피해야 합니다.
이건 제게 효과가 없었어요.
[마크업]
<div class="list" id="myElement1" data-item-order="some-value"> .... </div>
[jQuery]
jQuery("#myElement1").data("item-order", "my-new-value");
하지만 다음은 잘 작동했습니다! :):
(필요한 경우 하이픈 대신 밑줄을 사용합니다.)
[마크업]
<div class="list" id="myElement1" data-item_order="some-value"> .... </div>
[jQuery]
jQuery("#myElement1").data("item_order", "my-new-value");
도움이 되길 바랍니다.모두들 건배!
언급URL : https://stackoverflow.com/questions/8707226/jquery-data-does-not-work-but-attr-does
'programing' 카테고리의 다른 글
| Visual Studio 2013을 사용하여 관리되는 코드를 디버그할 수 없음("Cannot evaluate expression" 오류 - debug build 사용 중)(VS 2012가 작동함을 참고) (0) | 2023.09.02 |
|---|---|
| '연결-애저'라는 용어AD'가 cmdlet의 이름으로 인식되지 않습니다. (0) | 2023.09.02 |
| 데이터 바인딩을 사용하여 리소스의 문자열을 XML의 동적 변수와 결합하려면 어떻게 해야 합니까? (0) | 2023.09.02 |
| Rxjs 5 - 단순 Ajax 요청 (0) | 2023.09.02 |
| Groovy에서 문자열이 공백뿐만 아니라 null이 아닌지 확인하려면 어떻게 해야 합니까? (0) | 2023.09.02 |