Watch HTML and excecute jQuery script

Question

How can I constantly watch the HTML with jQuery and when a div exists, execute something.

I already had this:

if ( $( "#works_to_perform_div span.help-block.error-help-block" ).length ) {
    $('#works_to_perform_div span.help-block.error-help-block').appendTo('#works_to_perform_div .question__label');
}

But that doesn't work, because the div if pushed onto the screen without a refresh.

Isn't there some like watch div -> if div exists -> do something ?

@TamilSelvanC That's purpose of a MutationObserver then not interval. — Adrian, Oct 01 '18 at 13:32
You might want to re-think your logic a bit. Could you elaborate on what functionality you want at what time? There must be something that triggers the append for the div that you are "looking" for? Else why keep looking for it? But why not chain your event to whatever event is appending the div? I feel like a lot of information is left out in this question. However, what you can do is set a timer to run your scrip every x time and check if the div exists. you can basically do a `.find()` on your element and `.html()` to see if it contains anything. — Martin, Oct 01 '18 at 13:33
@Martin this $( "#works_to_perform_div span.help-block.error-help-block" ) is added when I press on a submit button. But the div is placed on a wrong position (somewhere between divs). So that why append it. If I pasted my code in my browser's console, it works. But that's because the help-block-error... already exists. $('#works_to_perform_div span.help-block.error-help-block').appendTo('#works_to_perform_div .question__label'); — Dennis, Oct 01 '18 at 13:57

score 0 · Answer 1 · edited Oct 01 '18 at 13:42

You can use the MutationObserver

Example from mdn

// Select the node that will be observed for mutations 
var targetNode = document.getElementById('some-id'); // Options for the observer (which mutations to observe) 
var config = {
  attributes: true,
  childList: true,
  subtree: true
}; // Callback function to execute when mutations are observed 
var callback = function(mutationsList, observer) {
  for (var mutation of mutationsList) {
    if (mutation.type == 'childList') {
      console.log('A child node has been added or removed.');
    } else if (mutation.type == 'attributes') {
      console.log('The ' + mutation.attributeName + ' attribute was modified.');
    }
  }
}; // Create an observer instance linked to the callback function 
var observer = new MutationObserver(callback); // Start observing the target node for configured mutations 
observer.observe(targetNode, config); // Later, you can stop observing 
observer.disconnect();

Rule · Answer 2 · 2018-10-01T13:40:42.883

-1

I don't think you can do that with JQuery. The solution is to add whatever you want to do and add it to the trigger that created the div. Extend your current function with the logic you are describing.

Something happens > div is created > (Add if statement here [IF DIV EXISTS]) Do something

EDIT: Alternatively you can try something like this if you really need it:

$('mydiv').bind("DOMSubtreeModified",function(){
  alert('changed');
});

as suggested here: jQuery Event : Detect changes to the html/text of a div

edited Oct 01 '18 at 13:40

answered Oct 01 '18 at 13:33

Rule

225
1
11

You can do it with jQuery, but as you pointed out, it's quite detrimental, depending. However, it might genuinely be what's needed, although I do doubt it. – Martin Oct 01 '18 at 13:36
`DOMSubtreeModified` has been deprecated for quite some time. You really shouldn't be using it. Use a `MutationObserver` instead – Rory McCrossan Oct 01 '18 at 13:37
Yes i completely agree with @Martin here. Watching the entire page for a div is not best practice and I would not suggest it, however I can not see the original code. – Rule Oct 01 '18 at 13:40

Watch HTML and excecute jQuery script

2 Answers2