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>';
}

href不适用于油脂

1 个答案: