将内联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;
    } 

} );