javascript - href 在greatmokey 中不起作用

Question

我的 Greasemonkey 脚本中有以下代码。如果我无法将订单保存到服务器，我会显示一条错误消息，然后显示一个链接(使用 <a href> 创建以再次保存它。此链接又是 save_order 方法。但这不起作用。我尝试过调试它但没有运气。(我对 JavaScript 有基本的了解)

function save_order() {
    server_url = 'https://server.com/api/put_order?user_id=' + form.user.value +'&order_id=' + orderId;
    GM_xmlhttpRequest({
        method: "GET",
        url: server_url,
        onload: function(response){
            if(response.status == 200){
                localstorage.removeItem(orderId);
                messageBar.innerHTML += '<br/>Order has been saved successfully.';
            } else {
                if (errorBar.style.display === 'none'){
                    errorBar.style.display = 'block';
                }
                errorBar.innerHTML += '<br/>Error saving. <a href="#" onclick="save_order();return false"><b>Try Again</b></a>';
            }
        }
    });
}

=======

完整代码

// ==UserScript==
// @name         SaveOrder
// @version      1.0
// @author       myname
// @include      https://xx*.xxxxxxxx.com*/*
// @run-at       document-end
// @grant        GM_xmlhttpRequest
// ==/UserScript==

var saveButton = document.getElementById('save-button');
saveButton.addEventListener("click", save_order,true);
var info_bar = document.getElementById('info_bar');
var error_bar = document.getElementById('error_bar');
var form = document.getElementById('place_order_form');
var order_id = form.order_id.value;

var localstorage = window.localStorage;

if (localstorage.getItem(order_id)){
    save_to_db();
} 

function save_order(){
    localstorage.setItem(order_id, order_id);
}

function save_to_db() {
    var random_boolean = false;//Math.random() >= 0.5;

    console.log(random_boolean);

    server_url = 'https://xxx.xxxx.com/api/put_order?user_id=' + form.user.value +'&order_id=' + order_id;
    GM_xmlhttpRequest({
        method: "GET",
        url: server_url,
        onload: function(response){
            if(response.status == 200 && random_boolean){
                localstorage.removeItem(order_id);
                info_bar.innerHTML += '<br/>Order saved successfully';
            } else {
                if (error_bar.style.display === 'none'){
                    error_bar.style.display = 'block';
                }
                error_bar.innerHTML += '<br/>Error saving. <a href="#" onclick="save_to_db();"><b>Try Again</b></a>';
            }
        }
    });
}

Answer 1

您的方法效果很好，正如您在本示例中看到的。

您可能在其他地方遇到了错误。

function test(){
  document.body.innerHTML += '<a class="function-link" href="#" onclick="test();">Test</a>';
}

<a class="function-link" href="#" onclick="test();">Test</a>

编辑:我做了一些挖掘，找到了解决您问题的方法。

不要在链接上添加 onclick，而是在附加到 save-to-db 类的 javascript 中创建一个事件处理程序，如下所示:

document.addEventListener("click", function(e) {
    if (e.target.closest('a') && e.target.closest('a').classList.contains("save-to-db")) {
        save_to_db();
    }
});

现在您需要做的就是删除 onclick 并将其替换为 class="save-to-db"

document.body.innerHTML += '<br/>Error saving. <a href="#" class="save-to-db"><b>Try Again</b></a>';

它现在就像一个魅力:

document.addEventListener("click", function(e) {
    if (e.target.closest('a') && e.target.closest('a').classList.contains("save-to-db")) {
        save_to_db();
    }
});

save_to_db();

function save_to_db() {
    console.log('Function called');
    document.body.innerHTML += '<br/>Error saving. <a href="#" class="save-to-db"><b>Try Again</b></a>';
}