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和vanilla 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>');
}

另请注意，等待load或DOMContentLoaded事件比使用setTimeout更好。

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

1 个答案: