jQuery - Detect dialog div addition to dom

Question

I am working on an Enterprise app. I need to style certain pop-ups that are shown in application. I found that whenever a popup is shown following div is added to the body.

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-describedby="ui-id-12" aria-labelledby="ui-id-13" style="position: absolute; height: auto; width: auto; top: 263px; left: 626px; display: none;">

The idea is to detect when this popup is added and then add classes to it as per my need. To accomplish that and for this I am using following code

    $(document).on('DOMNodeInserted',"div.ui-dialog", function(e){
        console.log("Dialog Div Added");
    });

But this is not working.

Please Help

sorry can you provide an example of what you mean by document.load — Neel, Apr 03 '14 at 15:56
document on load didn't work as the dialog is added later as a result of an user action. — Neel, Apr 06 '14 at 04:03

Igor Escobar · Accepted Answer · 2014-04-07T13:23:59.840

1

You could use the DOMSubtreeModified event. For example:

$(document).on('DOMSubtreeModified',function(){
  console.log("now there are " + $('a').length + " links on this page.");
})

Or

$(document).on('DOMAttrModified',function(){
  console.log("now there are " + $('a').length + " links on this page.");
})

Or

$(document).on('DOMNodeInserted',function(){
  console.log("now there are " + $('a').length + " links on this page.");
})

You can see more events to use here: http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents and see which one works better for you.

edited Apr 07 '14 at 13:23

answered Apr 03 '14 at 13:52

Igor Escobar

1,047
1
12
13

shouldn't I be using on instead of bind? – Neel Apr 03 '14 at 15:55
I used DOMNodeInserted instead of above mentioned events as it triggered fewer times than DOMSubtreeModified. – Neel Apr 06 '14 at 03:40
@Neel I also added the DOMNodeInserted in my comment just to make it more complete in case anyone needs it. – Igor Escobar Apr 07 '14 at 13:26
Don't forget the thumbs_up ;-) – Igor Escobar Apr 07 '14 at 13:27

score 0 · Answer 2 · edited May 23 '17 at 10:26

0

You are talking about dom mutation event handling. have a look at this: https://stackoverflow.com/a/4561975/2478038

edited May 23 '17 at 10:26

Community

1
1

answered Apr 03 '14 at 12:13

Novalis

81
6

jQuery - Detect dialog div addition to dom

2 Answers2