Question

我有2个不同的按钮，我希望用户能够输入签名。当我只点击其中一个时，它工作正常。但是当我在没有页面刷新的情况下单击下一个按钮时，它会运行第二个按钮的过程，但是然后再次运行第一个选项的过程。

任何人都可以帮我找出我做错了什么，这样点击时只会处理1个按钮吗？

$('#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 */ }
});
}

Answer 1

@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);
}

addEventListener（＆＃34;点击＆＃34;）被调用两次

1 个答案: