将变量从内联 Javascript 传递到单独文件中的单击处理程序

Question

我有一些内联 javascript 用于使用签名板 https://github.com/szimek/signature_pad 它看起来像这样：

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 传递给点击处理程序。

Click.js 包含在内联 javascript.

下方

我已经尝试了很多不同的解决方案，但我认为这是我所取得的最深入的解决方案。有人能给我指出正确的方向并说明为什么这不起作用吗？

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

} );

将变量从内联 Javascript 传递到单独文件中的单击处理程序

Passing variable from inline Javascript to click handler in separate file

javascript

jquery

signaturepad