Javascript CamanJS过滤器对按钮点击无响应？

我使用下面的代码在单击按钮时应用过滤器

<canvas id="canvas"></canvas>
<a href="#" id="vig">Vignette</a>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/camanjs/3.2/caman.full.min.js">
<script type="text/javascript">
var vig = $('#vig');

vig.on('click', function(e){
alert("Button Clicked");
Caman("image.jpg", "#canvas", function(){
this
    .vignette(300, 60)
    .render();
});
});
</script>

var vig=$（“#vig”）；
vig.on（'点击'）功能（e）{
警报（“点击按钮”）；
卡曼（“image.jpg”，“#canvas”，function（））{
这
.小插曲（300、60）
.render（）；
});
});

当我点击按钮时，我会收到警报，但camanJS过滤器不会做任何事情。如果我把过滤器的代码放在按钮点击功能之外，它会工作得很好

<script type="text/javascript">
Caman("image.jpg", "#canvas", function(){
this
    .vignette(300, 60)
    .render();
});
</script>

卡曼（“image.jpg”，“#canvas”，function（））{
这
.小插曲（300、60）
.render（）；
});

---

为什么会发生这种情况？

单击按钮后，画布是否会用基本图像初始化？控制台中是否有任何错误？没有画布不使用基本映像初始化，并且控制台中没有错误。所有我得到的是200 OK和304未修改。单击按钮也不会在控制台中导致任何错误。