Firing event on DOM attribute change
Note: As of 2012, Mutation Events have been removed from the standard and are now deprecated. See other answers or documentation for how to use their replacement, MutationObserver
.
You are referring to DOM Mutation Events. There is poor (but improving) browser support for these events. Mutation Events plugin for jQuery might get you some of the way.
JavaScript: Listen for attribute change?
You need MutationObserver, Here in snippet I have used setTimeout
to simulate modifying attribute
var element = document.querySelector('#test');
setTimeout(function() {
element.setAttribute('data-text', 'whatever');
}, 5000)
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === "attributes") {
console.log("attributes changed")
}
});
});
observer.observe(element, {
attributes: true //configure it to listen to attribute changes
});
<div id="test">Dummy Text</div>
JQuery how to listen for a element attribute/property change event
For reference, PrettyinPink's Comment was what was needed; looking up Mutation Observer rather than the older and more prolific Mutation Event was what was needed:
// Here we watch for new elements
const observer = new MutationObserver(function () {
console.log('observed!');
if($('#subBut').prop('disabled')) {
$('#reasons').slideDown();
}
else {
$('#reasons').slideUp();
}
});
// Param 1 of observe() must be a Node - document is a valid Node,
// but not advisable, limit the watcher to as small a context as possible
// Important here to set attributes to be true to check these.
observer.observe(document.getElementById('subBut'), {
attributes: true
});
Is it possible to listen for changes to an object's attributes in JavaScript?
Thanks for the comments guys. I've gone with the following:
var EntriesRegistry = (function(){
var instance = null;
function __constructor() {
var
self = this,
observations = {};
this.set = function(n,v)
{
self[n] = v;
if( observations[n] )
for( var i=0; i < observations[n].length; i++ )
observations[n][i].apply(null, [v, n]);
}
this.get = function(n)
{
return self[n];
}
this.observe = function(n,f)
{
if(observations[n] == undefined)
observations[n] = [];
observations[n].push(f);
}
}
return new function(){
this.getInstance = function(){
if (instance == null)
{
instance = new __constructor();
instance.constructor = null;
}
return instance;
}
}
})();
var entries = EntriesRegistry.getInstance();
var test = function(v){ alert(v); };
entries.set('bob', 'meh');
entries.get('bob');
entries.observe('seth', test);
entries.set('seth', 'dave');
Taking on-board your comments, I'll be using event delegation on the form objects to update the registry and trigger the registered observing methods.
This is working well for me so far... can you guys see any problems with this?
Detecting attribute change of value of an attribute I made
You would have to watch the DOM node changes. There is an API called MutationObserver
, but it looks like the support for it is very limited. This SO answer has a link to the status of the API, but it seems like there is no support for it in IE or Opera so far.
One way you could get around this problem is to have the part of the code that modifies the data-select-content-val
attribute dispatch an event that you can listen to.
For example, see: http://jsbin.com/arucuc/3/edit on how to tie it together.
The code here is
$(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);
});
});
Related Topics
Change Values in Array When Doing Foreach
How to Split the Ng-Repeat Data with Three Columns Using Bootstrap
How to Sort an Array of Objects with Jquery or JavaScript
How to Create an Https Server in Node.Js
Defer Execution for Es6 Template Literals
How to Get All Selected Values from <Select Multiple=Multiple>
How to Find the Width of a Div Using Vanilla JavaScript
What HTML Tags Support the Onload/Onerror JavaScript Event Attributes
Syntax Highlighting Code with JavaScript
Get Average Color of Image via JavaScript
JavaScript Function Declaration and Evaluation Order
How Does _Proto_ Differ from Constructor.Prototype
Expression Inside Switch Case Statement
Jquery Submit Form and Then Show Results in an Existing Div
How to Load Images Dynamically (Or Lazily) When Users Scrolls Them into View