按钮上的 TamperMonkey EventListener 不起作用

Question

我创建了这个片段：

function addClick(button, container) {
    console.log("In add click");
    const data = container.nextElementSibling.childNodes[0].innerHTML;
    button.addEventListener('click', ()=>{
        alert('clicked')
        console.log("Clicked");
    })
}

function createCopyButtons(array){
    array.forEach(element => {

        const container = document.createElement('div');
        const button = document.createElement('button');

        button.innerHTML = "Copy"
        
        styleContainer(container);
        styleButton(button, element);
        stylePrevious(element);
        
        container.innerHTML = element.outerHTML + button.outerHTML;

        element.parentNode.replaceChild(container, element);

        addClick(button, container); 

    });
}

现在这里的数组是 DOM 个元素的数组，我希望这个属性应用，然后我用更多的东西调用 createCopyButtons() 函数。现在的问题是这个事件侦听器不适用或不起作用。我试图等到文件被这些答案加载，然后才应用我的 javascript 片段，但事件监听器似乎不起作用。

document.addEventListener("DOMContentLoaded", function(event) { 
  //do work
});

if (document.readyState == "complete") {
     // document is ready. Do your stuff here
   }

请帮忙。

Answer 1

更新：

function addClick(button) {
    button.addEventListener('click', ()=>{
        console.log("Clicked");
    })
}

let p = document.querySelectorAll('p');

// innerHTML not work
let btn1 = document.createElement('button');
btn1.innerHTML = "Not work";
p[0].innerHTML = btn1.outerHTML;
addClick(btn1)

// work
let btn2 = document.createElement('button');
btn2.innerHTML = "work";
p[1].appendChild(btn2);
addClick(btn2)

<p></p>
<p></p>

因为您使用字符串 (.innerHTML) 而非 DOM 或使用 appendChild()

将按钮附加到容器

container.innerHTML = element.outerHTML + button.outerHTML

以下函数不会应用该事件

addClick(button, container);

我不知道为什么你需要将目标元素和按钮包装在 div 中，为什么不使用或 insertBefore() 或 insertAdjacentHTML() 在目标元素之后附加按钮但是以下是您的工作代码。

它在 container 中找到按钮用作 addClick() 参数

function addClick(button, container) {
  console.log("In add click");
  const data = container.nextElementSibling.childNodes[0].innerHTML;

  button.addEventListener('click', () => {
    alert('clicked')
    console.log("Clicked");
  })
}

function createCopyButtons(array) {
  array.forEach(element => {

    const container = document.createElement('div');
    let button = document.createElement('button');

    button.innerHTML = "Copy"

    container.innerHTML = element.outerHTML + button.outerHTML;

    element.parentNode.replaceChild(container, element);

    let btn = container.querySelector('button'); // <== find the button
    addClick(btn, btn.parentNode);

  });
}
createCopyButtons(document.querySelectorAll('input'))

<div>
  <input type="text">
  <p><span>test</span></p>
</div>

按钮上的 TamperMonkey EventListener 不起作用

TamperMonkey EventListener on button not working

javascript

dom

event-listener

tampermonkey