DOMSubtreeModified - check if only first item in container has changed

Question

I am trying to listen for changes inside container, lets assume .container

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

each item has various angular js attributes, data attributes etc that change quiet a lot, as well as text in them so:

$('.container').bind("DOMSubtreeModified", function() {
    console.log("change");
});

prints out a lot of "change" text. I want to decrease this and at the same time I only need to check if first item inside container changed, therefore how can I only check this?

Unrelated, but, useful => [http://stackoverflow.com/questions/6659662/why-is-the-domsubtreemodified-event-deprecated-in-dom-level-3](http://stackoverflow.com/questions/6659662/why-is-the-domsubtreemodified-event-deprecated-in-dom-level-3) — lshettyl, Jul 24 '15 at 10:57
Do you mean first item content changed or the whole first item element? Anyway, using angularjs (or even just in js), that's surely not the way to check it, using `DOMSubtreeModified` event — A. Wolff, Jul 24 '15 at 10:58
@A.Wolff first item in general, can be content or element as a whole. I am personally not using angular, this is for chrome extension, I only mentioned it, as product that has items I listen to, uses angular, thus its attributes. — Ilja, Jul 24 '15 at 11:00

A. Wolff · Accepted Answer · 2015-07-24T11:07:43.587

0

You should filter out event target, using e.g:

$('.container').on("DOMSubtreeModified", function (e) {
    if($(e.target).is('.item:first-child')) { 
        console.log(e.target);
    }
});

edited Jul 24 '15 at 11:07

answered Jul 24 '15 at 11:02

A. Wolff

74,033
9
94
155

1

e.target seems to be conatiner all the time – Ilja Jul 24 '15 at 11:30
Not on chrome as i tested it – A. Wolff Jul 24 '15 at 11:33

DOMSubtreeModified - check if only first item in container has changed

1 Answers1