創建具有特定css的div時如何執行函式？

我正在開發一個 tampermonkey 腳本，以便在出現時填充彈出視窗，特別是這個。

因此，當頁面啟動并單擊一個按鈕時，這會創建一個新的彈出視窗，該彈出視窗是具有特定類的 div。

這個想法是當這個彈出視窗被啟動時執行一段代碼來填充那個彈出視窗。

我正在嘗試使用以下代碼：

/ ==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');
    });

})();

但不起作用。

我怎樣才能做到這一點？

編輯 1

更新了所有代碼

不是控制臺中的錯誤

謝謝

uj5u.com熱心網友回復：

我會使用mutationObserver來完成它：https : //developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe

來自 MDN：

MutationObserver 方法 observe() 配置 MutationObserver 回呼以開始接收與給定選項匹配的 DOM 更改通知。

uj5u.com熱心網友回復：

從上面的評論...

“有兩種選擇。1st）OP擁有腳本和/或可以訂閱彈出啟動程序/事件。在這種情況下，OP可以撰寫和/或掛鉤自定義事件處理代碼。2nd）OP不擁有腳本和/或無法訂閱彈出啟動程序/事件。在這種情況下，OP 需要使用MutationObserver."

下一個提供的代碼針對第二種情況，并試圖涵蓋許多可能但合理的彈出視窗如何改變 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>

標籤：javascript dom 事件处理 篡改猴子 突变观察者

上一篇：使用JS制作井字游戲

下一篇：如何將多個JavaScript物件陣列填充到HTMLDOM