Javascript addEventListener（“单击”）被调用两次

我有两个不同的按钮，我希望用户能够键入签名。当我点击其中的一个时，效果很好。但是，当我在没有页面刷新的情况下单击next按钮时，它会运行第二个按钮的进程，但随后会再次运行第一个选项的进程

有人能帮我找出我做错了什么，这样当点击按钮时，只有一个按钮会被处理吗

$('#button1').click(function (event) {
var id = "button1",
    sigSign = $(this);
signatureSignage(id, sigSign);
});

$('#button2').click(function (event) {
var id = "button2",
    sigSign = $(this);
signatureSignage(id, sigSign);
});


function signatureSignage(id, sigSign) {
$("#sigPadContainer").fadeIn();
$('#closeSigPad').click(function (event) {
    $("#sigPadContainer").fadeOut();
});

var wrapper = document.getElementById("signature-pad"),
    clearButton = wrapper.querySelector("[data-action=clear]"),
    saveButton = wrapper.querySelector("[data-action=save]"),
    canvas = wrapper.querySelector("canvas"),
    signaturePad;

function resizeCanvas() {
    var ratio = window.devicePixelRatio || 1;
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
}

window.onresize = resizeCanvas;
resizeCanvas();

signaturePad = new SignaturePad(canvas);

clearButton.addEventListener("click", function (event) {
    signaturePad.clear();
});
saveButton.addEventListener("click", function (event) {
    if (signaturePad.isEmpty()) { /* alert you forgot to sign */ } else { /* This get's run twice */ }
});
}

---

@NiettheDarkAbsol为我指明了正确的方向。这是我的新代码，以防有人感兴趣

var wrapper = document.getElementById("signature-pad"),
clearButton = wrapper.querySelector("[data-action=clear]"),
saveButton = wrapper.querySelector("[data-action=save]"),
id, signaturePad;

/* Signature Sign */
$('.sigSign').click(function(event) {
    id = $(this).attr("name");

         if(id == "sig1") { signatureSignage(id); }
    else if(id == "sig2") { signatureSignage(id); }

});

$('#sig1').click(function(event) {
    id = "sig1";
    signatureSignage(id);
});

$('#sig2').click(function(event) {
    id = "sig2";
    signatureSignage(id);
});


$('#closeSigPad').click(function(event) { $("#sigPadContainer").fadeOut(); });
clearButton.addEventListener("click", function (event) { signaturePad.clear(); });
saveButton.addEventListener("click", function (event) { /* Do the save thing */ });

function signatureSignage(id)
{
    $("#sigPadContainer").fadeIn();
    var wrapper = document.getElementById("signature-pad"), canvas = wrapper.querySelector("canvas");

    function resizeCanvas() {
        var ratio =  window.devicePixelRatio || 1;
        canvas.width = canvas.offsetWidth * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        canvas.getContext("2d").scale(ratio, ratio);
    }

    window.onresize = resizeCanvas;
    resizeCanvas();

    signaturePad = new SignaturePad(canvas);
} 

---

您正在一个函数中添加事件侦听器，该函数本身就是一个事件侦听器。这几乎总是一个坏主意。你推荐@NiettheDarkAbsol做什么？你应该只设置

clearButton

和

saveButton

的侦听器，同时在列表顶部设置

button1

和

button2

的侦听器script@PatrickGunderson然后是我发送的信息

signatureSignage

导致我想通过

Save按钮执行的操作停止工作：\