I have this code working perfectly in firefox.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src=".6.4.min.js"></script>
<script type="text/javascript">
function CreateEvent()
{
var x = document.createEvent("MutationEvent");
x.initMutationEvent("DOMSubtreeModified", true, false, null, "", "", "", 0);
document.dispatchEvent(x);
}
$(document).ready(function() {
$('#myDiv')[0].addEventListener('DOMNodeRemoved', function () { console.log('Content removed!'); }, false);
$('#myDiv')[0].addEventListener('DOMSubtreeModified', function () { console.log('DOMSubtreeModified modified!'); }, false);
$('#myDiv')[0].addEventListener('DOMNodeRemovedFromDocument', function () { console.log('DOMNodeRemovedFromDocument !'); }, false);
$('#myDiv')[0].addEventListener('DOMNodeInserted', function () { console.log('DOMNodeInserted !'); }, false);
$('#myBtn').click(function (e) {
$('#myDiv').css({ marginLeft : "300px"});
});
});
</script>
</head>
<body>
<div id="myDiv">Content</div>
<div id="myBtn">
Button
</div>
</body>
</html>
But it's not working on Chrome. I want an event triggered everytime something happens to myDiv. (remove, css modifcation, everything).
Any work-arounds?
I have this code working perfectly in firefox.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://code.jquery./jquery-1.6.4.min.js"></script>
<script type="text/javascript">
function CreateEvent()
{
var x = document.createEvent("MutationEvent");
x.initMutationEvent("DOMSubtreeModified", true, false, null, "", "", "", 0);
document.dispatchEvent(x);
}
$(document).ready(function() {
$('#myDiv')[0].addEventListener('DOMNodeRemoved', function () { console.log('Content removed!'); }, false);
$('#myDiv')[0].addEventListener('DOMSubtreeModified', function () { console.log('DOMSubtreeModified modified!'); }, false);
$('#myDiv')[0].addEventListener('DOMNodeRemovedFromDocument', function () { console.log('DOMNodeRemovedFromDocument !'); }, false);
$('#myDiv')[0].addEventListener('DOMNodeInserted', function () { console.log('DOMNodeInserted !'); }, false);
$('#myBtn').click(function (e) {
$('#myDiv').css({ marginLeft : "300px"});
});
});
</script>
</head>
<body>
<div id="myDiv">Content</div>
<div id="myBtn">
Button
</div>
</body>
</html>
But it's not working on Chrome. I want an event triggered everytime something happens to myDiv. (remove, css modifcation, everything).
Any work-arounds?
Share Improve this question edited Sep 24, 2013 at 4:28 000 27.3k10 gold badges74 silver badges103 bronze badges asked Oct 20, 2011 at 14:30 gabitzishgabitzish 9,6917 gold badges46 silver badges67 bronze badges 3- Look at a similar question i asked stackoverflow./questions/7692730/…. – aziz punjani Commented Oct 20, 2011 at 14:40
- Why would you expected a CSS modification to fire any of the events you're trying to handle? – Tim Down Commented Oct 20, 2011 at 14:43
- 1 code.google./p/chromium/issues/detail?id=59906, code.google./p/chromium/issues/detail?id=30191 – Riz Commented Oct 20, 2011 at 14:49
1 Answer
Reset to default 3It won't work going forward. DOM mutation events have been deprecated and won't be supported going forward, http://www.w3/TR/DOM-Level-3-Events/#events-mutationevents.