将变量从内联 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 的最漂亮的方式，但我认为它可以满足您的目的。