创建具有特定 css 的 div 时如何执行函数？

Question

I am developing a tampermonkey script, in order to fill a popup when this appears, this in particular.

So when the page is launched and I click a button, this creates a new popup that is a div with a particular class.

The idea is that when this popup is launched execute a piece of code to fill that popup.

I am triying with the following code:

/ ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        
// @icon         https://www.google.com/s2/favicons?domain=atlassian.net
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    document.getElementById('jira-dialog-heading').addEventListener('click', function() {
        alert('do something');
    });

})();

but doesn't work.

How can I do this?

EDIT 1

All code updated

Not errors in console

Thanks

Answer 1

I would use mutationObserver to accomplish it: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe

from MDN:

The MutationObserver method observe() configures the MutationObserver callback to begin receiving notifications of changes to the DOM that match the given options.

Answer 2

From the above comment ...

"There are two options. 1st) The OP owns the script and/or can subscribe to the popup launch process/event. In this case the OP can write and/or hook custom event handling code. 2nd) The OP does not own the script and/or can not subscribe to the popup launch process/event. In this case the OP needs to make use of a MutationObserver ."

The next provided code targets the second scenario and tries to cover the many possible but reasonable ways of how a popup could mutate the DOM ...

 // custom specific popup handling function handlePopupShow(popupNode) { console.log('handle popup show :: node ...', popupNode); } function handlePopupHide(popupNode) { console.log('handle popup hide :: node ...', popupNode); } // The popup specific mutation handler, the observers callback function. function handleChildNodeAndClassNameMutation(mutationList/*, observer*/) { mutationList.forEach(mutation => { const { type, attributeName } = mutation; if (type === 'attributes' && attributeName === 'class') { const { target } = mutation; if (target.matches('.popup-specific-name.show')) { handlePopupShow(target); } else if ( target.matches('.popup-specific-name.hide') || target.matches('.popup-specific-name:not(.show)') ) { handlePopupHide(target); } } else if (type === 'childList') { const { addedNodes: [ addedTargetNode ], removedNodes: [ removedTargetNode ], } = mutation; if ( addedTargetNode?.matches?.('.popup-specific-name') // addedTargetNode?.matches?.('.popup-specific-name.show') ) { handlePopupShow(addedTargetNode); } else if ( removedTargetNode?.matches?.('.popup-specific-name') ) { handlePopupHide(removedTargetNode); } } }); } // - The to be observed target node. // - Due to detecting a popup specifc element // it has to be the `document.body`. const popupMutationTarget = document.body; // Defines the to be observed popup specific mutations. const popupMutationConfig = { attributeFilter: ['class'], childList: true, subtree: true, }; // Create mutation observer. const popupObserver = new MutationObserver(handleChildNodeAndClassNameMutation); // // Start target node observation for popup specific mutations. // popupObserver.observe(popupMutationTarget, popupMutationConfig); // // Does stop the observation. // popupObserver.disconnect(); // bring test case to life. function togglePermanentPopup(/* evt */) { document .querySelector('.popup-specific-name.permanent') .classList.toggle('show'); } function toggleNonPermanentPopup(/* evt */) { let popupNode = document.querySelector('.popup-specific-name.non-permanent'); if (popupNode) { popupNode.remove(); } else { popupNode = document.createElement('div'); popupNode.classList.add('popup-specific-name', 'non-permanent'); popupNode.textContent = 'non permanent dom element, show and hide by insert and remove'; document.body.prepend(popupNode); } } document .querySelector('#toggle_permanent_popup') .addEventListener('click', togglePermanentPopup); document .querySelector('#toggle_non_permanent_popup') .addEventListener('click', toggleNonPermanentPopup); let inObservation = false; function toggleObservation({ target }) { if (inObservation) { // Does stop the observation. popupObserver.disconnect(); target.textContent = 'Start observation'; console.log('+++ Observer disconnected +++'); } else { // Start target node observation for popup specific mutations. popupObserver.observe(popupMutationTarget, popupMutationConfig); target.textContent = 'Stop observation'; console.log('+++ Observer is running +++'); } inObservation = !inObservation; } document .querySelector('#toggle_observation') .addEventListener('click', toggleObservation);

 .popup-specific-name { display: block; position: absolute; top: 0; width: 100%; text-align: center; background-color: #cf0; } .popup-specific-name.permanent { display: none; background-color: #fc0; } .popup-specific-name.show { display: unset; } .popup-specific-name + .popup-specific-name { top: 20px; } button { display: block; position: relative; top: 35px; } button#toggle_observation { float: right; top: 14px; } .as-console-wrapper { max-height: 111px!important; }

 <div class="popup-specific-name permanent"> permanent dom element, class name controlled show and hide </div> <button id="toggle_permanent_popup">toggle permanant popup</button> <button id="toggle_non_permanent_popup">toggle non permanant popup</button> <button id="toggle_observation">Start observation</button>