Jquery data() undefined를 반환합니다.

Question

간단한 jquery data() 테스트를 수행했습니다. 그러나 그것은 정의되지 않은 반환됩니다. 그것은 jsfiddle (http://jsfiddle.net/yrCdj/)에서 작동합니다.

내가 사업부를 채우는 jinja2 루프를하고 난 나중에 사용하기 위해 일부 메타 데이터를 태그 할 :

{% for s in siteInfo[:markers[0]] %} 
<div class="sitebox2"> 
<script> 
$(".sitebox2:last").append('<a href="/sites/d?siteid={{s[5]}}">{{s[0]}}</a><br>Distance     from {{loc}} is {{s[6]}} km.<br>'); 
$(".sitebox2:last").data('fruit', 'apple'); 
</script> 

</div> 
{% endfor %} 

난 후 작동 여부를 테스트하기 위해이 데이터를 호출하려고 :

<script type="text/javascript"> 
$(".sitebox2").each(function(k, v) { 
    var f = $(v).data('fruit'); 
alert(f); 
}); 

</script> 

정의되지 않은 값을 반환합니다. 무엇이 잘못 될지에 대한 아이디어가 있습니까? 범위의 문제처럼 보입니다. 아마도 DOM에서 직접 데이터를 가져올 방법을 찾아야 할 것입니다.

Answer 1

닫기 div 태그 다음에 스크립트를 실행 해보십시오.

{% for s in siteInfo[:markers[0]] %} 
<div class="sitebox2"> 
    <a href="/sites/d?siteid={{s[5]}}">{{s[0]}}</a><br>Distance from {{loc}} is {{s[6]}} km.<br> 
</div> 
<script> 
    $(".sitebox2:last").data('fruit', 'apple'); 
</script> 
{% endfor %} 

또는 당신은 사용할 수 data 속성과 같은 :

{% for s in siteInfo[:markers[0]] %} 
<div class="sitebox2" data-fruit="apple"> 
    <a href="/sites/d?siteid={{s[5]}}">{{s[0]}}</a><br>Distance from {{loc}} is {{s[6]}} km.<br> 
</div> 
{% endfor %}