javascript - Tampermonkey，在点击事件上从附加的 DOM 对象调用用户脚本函数

Question

我几乎尝试了在 StackOverflow 上找到的所有解决方案，但没有一个能帮助我解决问题。这是我的代码:

//Toolbar body

var toolbarbody = '<div id="scrappytoolbar" style="width:100%; height:30px; background-color: #ffea56;">' +
'<ul>' +
'<li id="litabelka">Tabelka</li>' +
'<li id="licena">Cena</li>' +
'<li>Opis</li>' +
'</div>';


//Toolbar Loading

function loadToolbar() {
 $("#article-desc-wrapper").css("margin-top", "320px");
 $("#productDetailsMainInfo").after(toolbarbody); 
 $("#productDetailsHeadlineArea").after('<button id="guziktestowy">Hehes</button>');
    
    
    
}

setTimeout(loadToolbar, 2000);

附加 HTML 后，我想在 li#litabelka 上添加一个监听器执行一些用户脚本代码。我尝试了 jQuery onclick和普通的 javascript addEventListener但点击事件没有执行 - 点击时没有任何反应。

Answer 1

我建议您使用 DOM 来解析 HTML。你可以这样做:

var toolbarbody = '<div id="scrappytoolbar" style="width:100%; height:30px; background-color: #ffea56;">' +
'<ul>' +
'<li id="litabelka">Tabelka</li>' +
'<li id="licena">Cena</li>' +
'<li>Opis</li>' +
'</div>';
var parser = document.createElement("div");
parser.innerHTML = toolbarbody;
var toolbarElement = parser.firstChild;
// remove the toolbar from parser
parser.removeChild(toolbarElement);

现在实际的 DOM 元素位于 toolbarElement 中，因此您可以在它们上应用监听器:

toolbarElement.querySelector("#litabelka").addEventListener("click", function() {
    // do something on click here
});

但请记住，现在您需要附加 toolbarElement，而不是 HTML 字符串:

function loadToolbar() {
    $("#article-desc-wrapper").css("margin-top", "320px");
    // we now append DOM element
    $("#productDetailsMainInfo").after(toolbarElement); 
    $("#productDetailsHeadlineArea").after('<button id="guziktestowy">Hehes</button>');
}

另请注意，最好等待加载或DOMContentLoaded事件而不是使用 setTimeout。