addEventListener to div element

Question

I am trying to fire a script when the contents of a div are altered, specifically when a div receives the next set of results from a js loaded paginator.

I have this:

<script script type="text/javascript" language="javascript">
document.addEventListener("DOMCharacterDataModified", ssdOnloadEvents, false);

function ssdOnloadEvents (evt) {
    var jsInitChecktimer = setInterval (checkForJS_Finish, 111);

    function checkForJS_Finish () {
        if (  document.querySelector ("#tester")
        ) {
            clearInterval (jsInitChecktimer);
            //do the actual work

            var reqs = document.getElementById('requests');
            var reqVal = reqs.get('value');
            var buttons = $$('.clicker');
            Array.each(buttons, function(va, index){
            alert(va.get('value'));
            });

        }
    }
}                                   
</script>

This works well when the doc loads (as the results take a few seconds to arrive) but I need to narrow this down to the actual div contents, so other changes on the page do not fire the events.

I have tried:

var textNode = document.getElementById("sitepage_content_content");

    textNode.addEventListener("DOMCharacterDataModified", function(evt) {
    alert("Text changed");
    }, false);

But the above does not return anything. Can what I am trying to do be done in this way? If yes where am I going wrong?

Using Social Engine (Zend) framework with MooTools.

Then I have no idea, all I can really tell you is that the event you're using is deprecated and should have been removed from the web. — adeneo, May 10 '14 at 21:35
@adeneo Do you mean the listener "DOMCharacterDataModified"? — john, May 10 '14 at 21:39
Yes, it's a [***Mutation Event***](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events) — adeneo, May 10 '14 at 21:47
@adeneo Thanks, Are there any other typeSelector's that will do the job Or must I try a new approach, as https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events suggests? (new to moo tools) — john, May 10 '14 at 22:28
just had a play on how to normalise these a little so they play nicer with mootools but not really happy with api. anyway, bed time. http://jsfiddle.net/dimitar/PYErL/ — Dimitar Christoff, May 10 '14 at 23:38
Why not just add a callback on your ajax Request's `onSuccess` so you get something being fired from there? — Rikard, May 11 '14 at 00:55

john · Answer 1 · 2014-05-12T09:52:36.103

I did this in the end with a little cheat :-( There is a google map loading on the page that sets markers to match the location of the results. So I added my events to the end this code namely: function setMarker() {}. I will not mark this as the correct answer as it is not really an answer to my question, but rather a solution to my problem, which is localised to the Social engine framework. I will add a Social engine tag to my original question in the hope it may help someone else in the future. Thanks guys.

addEventListener to div element

1 Answers1