将变量从内联 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

你能试着在你的 clearButton 行下添加这个吗？此外，也许将发送签名更改为 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;    } } );

Answer 2

您可以将 signaturePad 变量保存在 window 对象中window.signaturePad = new...然后以同样的方式访问它window.signaturePad.isEmpty()这不是做 javascript 的最漂亮的方式，但我认为它可以满足您的目的。