将内联Javascript中的变量传递给单独文件中的click处理程序

我有一些使用签名板的内联javascript 看起来是这样的：

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

在页脚我有一个单独的文件包括在内 点击.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;
        } 

} );

当我点击按钮时，我得到： 未捕获引用错误：未定义signaturePad

如果我点击clearbutton按钮，它工作正常。我无法理解问题是什么，以及如何将signaturePad传递给click处理程序

Click.js包含在内联javascript下面

---

我已经尝试了很多不同的解决方案，但我认为这是我最远的一次。有人能给我指出正确的方向并告诉我为什么这不起作用吗？

您可以将signaturePad变量保存在window对象中

window.signaturePad = new...

然后以同样的方式访问它

window.signaturePad.isEmpty()

---

这不是编写javascript最漂亮的方法，但我认为它适合您的需要。

您可以尝试将其添加到clearButton行下面吗？ 另外，可能将send签名更改为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;
    } 

} );

---

如果

var signaturePad

位于加载事件处理程序内，则它将不在范围外。尝试在所有脚本之外声明

var signaturePad

，然后更改为

signaturePad=new signaturePad（canvas，{backgroundColor:'rgb（255，255，255）}）您现在的位置谢谢，工作完美！现在我只是好奇为什么没有这个就不行，你知道吗？