將內聯Javascript中的變量傳遞到單獨文件中的單擊處理程序

Question

我有一些用於使用Signature Pad https://github.com/szimek/signature_pad的嵌入式JavaScript，它看起來像這樣：

var signaturePad = new SignaturePad(canvas, {
  backgroundColor: 'rgb(255, 255, 255)'
});
clearButton.addEventListener("click", function (event) {
  signaturePad.clear();
});

在頁腳中，我有一個單獨的文件，其中包含click.js

$('.send-signature').on( 'click', function( event ) {
        event.preventDefault();
        console.log(event);
        var $button = $(this);
        $button.prop("disabled",true);
        if (signaturePad.isEmpty()) {
            alert("Please provide a signature first.");
            return false;
        } 

} );

當我單擊按鈕時，我得到： 未捕獲的ReferenceError：未定義signaturePad

如果我單擊clearbutton按鈕，它可以正常工作。 我不明白問題是什么以及如何將signaturePad傳遞給單擊處理程序。

內嵌javascript下方包含Click.js 。

我嘗試了許多不同的解決方案，但是我認為這是我所遇到的最遠的解決方案。 有人可以指出正確的方向，然后說為什么這行不通嗎？

Answer 1

您可以將signaturePad變量保存在window對象中

window.signaturePad = new...

然后以相同的方式訪問它

window.signaturePad.isEmpty()

這不是執行javascript的最漂亮方法，但是我認為您可以這樣做。

Answer 2

您可以嘗試在clearButton行下添加此權限嗎？ 另外，也許將send-signature更改為addListener格式，看看是否有任何改變。

$('.send-signature').on( 'click', function( event ) {
    event.preventDefault();
    console.log(event);
    var $button = $(this);
    $button.prop("disabled",true);
    if (signaturePad.isEmpty()) {
        alert("Please provide a signature first.");
        return false;
    } 

} );