클릭시 데이터 속성 값을 얻는 방법은 무엇입니까?

Question

나는 링크가 있고 한 div의 텍스트 및 데이터 속성 값이 변경되는 중입니다. 변경된 값을 얻을 때 다른 링크가 있습니다. 여기 코드입니다 : 값이 난 사업부하지만 데이터 속성 값의 새 텍스트 값을 얻을 수 변경 후였다 같은 유지

<a class="first" href="#">change value</a> 
<a class="second" href="#">get value</a> 
<div class="value" data-test="test">test</div> 

$(document).ready(function() { 
    $('.first').on('click', function(e) { 
     e.preventDefault(); 
     $('.value').html($(this).text()).attr('data-test',$(this).text());  
    }); 

    $('.second').on('click', function(e) { 
     e.preventDefault(); 

     $value = $('.value').text(); 
     $data = $('.value').data('test'); 
     alert($data); 
    }); 
}); 

http://jsfiddle.net/4daoqzc8/2/

문제가있을 때 돔이로드되었습니다. 데이터 속성의 새 값을 얻으려면 어떻게해야합니까?

Answer 1

jQuery를 만 data-test 속성을 검색합니다 값이 이미 저장되어 있지 않은 경우 값 .data('test')을 입력하십시오. 그래서 당신이 속성을 변경할 때 다시 다음 속성에서 .data('test')를 검색하기 위해 jQuery를 강제로 호출 할 수 .removeData 방법, 제공 :

$('.value').html($(this).text()) 
    .removeData('test') 
    .attr('data-test', $(this).text()); 

http://jsfiddle.net/mblase75/8mp6k2w2/

---

하지만를, 더 나은 것 일관성을 유지하고 값을 설정하고 얻으려면 .attr() 또는 .data()을 사용하십시오.

Answer 2

당신은 attr 대신 data 기능을 사용하여 값을 설정

$data = $('.value').attr('data-test'); 

Answer 3

이 코드를 변경

사용할 수 있습니다

이

$('.value').html($(this).text()) 
      .data('test', $(this).text()); 

바이올린 : http://jsfiddle.net/bo3h469a/

Answer 4

시도해보십시오.

$data = $('.value').data()['test']; 

여기서 jQuery Data vs Attr?은 이에 대한보다 흥미로운 주제입니다.