jQuery javascript中重置表单的问题

在做图片编辑器的实验时，涉及到了表单重置的问题，而我使用的是jQuery实现的，HTML的代码如下：

            

              Grayscale
              
            
            

                Blur
                
            
            

                Brightness
                
            
            

                Contrast
                
            
            

                Hue Rotate
                
            
            

                Opacity
                
            
            

                Invert
                
            
            

                Sepia
                
            
            

                Saturate
                
            
            
          

一开始我用的是以下这样的方法来重置的同时执行一个恢复函数：

$("#imageEditor").on('reset',function(){
    setTimeout(function(){
       editImage();
    },0);
});

运行之后发现表单上的数据重置了，但是里面的函数并没有执行。我上网查了，发现在input中设置了type为reset，就创建了一个Reset对象，只要点击一下input，就会执行重置函数reset()。
经过修改我将input里面的type改为button，然后为button绑定一个点击事件，这样就可以同时执行两个函数了，代码如下：

$("#reset").click(function(){
    $("#imageEditor").reset();
    editImage();
});

需要注意的是reset()方法只使用于表单对象form。
结果浏览器报出的错误是：

("#imageEditor").reset() is not a function;

我上网查了一下reset()方法的使用，发现reset()方法只有在javascript中才有效的，在jQuery里面是没有这个方法，所以我做了以下改变：

$("#reset").click(function(){
    document.getElementById("imageEditor").reset();
    editImage();
});

结果出现了这样的错误：

reset() is not a function

我再次上stackoverflow查询了同样的问题，他们的答案是：

the reason might be an element which has reset as name or id. I faced same issue.
Naming any element as reset overrides reset() function.

就是有元素的名字或者id取为了reset，经过我的修改，以下代码：

$("#reset1").click(function(){
    console.log("111");
    document.getElementById("imageEditor").reset();
    editImage();
});

这次在重置按钮的同时，就可以执行后面定义的函数了。