작성한 속성 값의 속성 변경 감지

Question

HTML data-select-content-val에 속성을 생성했으며 정보가 동적으로 채워집니다.

속성의 값이 변경된 것을 감지하는 방법이 있습니까?

$(document).on("change", "div[data-select-content-val]", function(){ 
    alert("BOOP!"); 
}); 

Answer 1

DOM 노드를 변경해야합니다. MutationObserver이라는 API가 있지만 매우 제한적으로 지원됩니다. 이 SO answer에는 API의 status에 대한 링크가 있지만 지금까지는 IE 나 Opera에서 지원되지 않는 것 같습니다.

이 문제를 해결할 수있는 방법 중 하나는 data-select-content-val 특성을 수정하는 코드 부분에 청취 할 수있는 이벤트를 전달하는 것입니다.

예를 들어, 함께 묶는 방법은 http://jsbin.com/arucuc/3/edit을 참조하십시오.

코드는 여기에 속성 변경하는 이벤트 리스너를 추가 this 확장이 있습니다

$(function() { 
    // Here you register for the event and do whatever you need to do. 
    $(document).on('data-attribute-changed', function() { 
    var data = $('#contains-data').data('mydata'); 
    alert('Data changed to: ' + data); 
    }); 

    $('#button').click(function() { 
    $('#contains-data').data('mydata', 'foo'); 
    // Whenever you change the attribute you will user the .trigger 
    // method. The name of the event is arbitrary 
    $(document).trigger('data-attribute-changed'); 
    }); 

    $('#getbutton').click(function() { 
    var data = $('#contains-data').data('mydata'); 
    alert('Data is: ' + data); 
    }); 
}); 

Answer 2

입니다.

사용법 : 선택한 요소

$(selector).attrchange({ 
    trackValues: true, /* Default to false, if set to true the event object is 
       updated with old and new value.*/ 
    callback: function (event) { 
     //event    - event object 
     //event.attributeName - Name of the attribute modified 
     //event.oldValue  - Previous value of the modified attribute 
     //event.newValue  - New value of the modified attribute 
     //Triggered when the selected elements attribute is added/updated/removed 
    }   
}); 

Answer 3

에

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript" 
    src="https://cdn.rawgit.com/meetselva/attrchange/master/js/attrchange.js"></script> 

바인드 attrchange 핸들러 함수 당신은 data-* 변경 사항을 포함 특성 변경 사항을 추적 할 MutationObserver를 사용할 수 있습니다.

var foo = document.getElementById('foo'); 
 

 
var observer = new MutationObserver(function(mutations) { 
 
    console.log('data-select-content-val changed'); 
 
}); 
 
observer.observe(foo, { 
 
    attributes: true, 
 
    attributeFilter: ['data-select-content-val'] }); 
 

 
foo.dataset.selectContentVal = 1;

<div id='foo'></div>