jQuery javascript中重置表单的问题

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

<form id="imageEditor">
            <p>
              <label for="gs">Grayscale</label>
              <input id="gs" name="gs" type="range" min=0 max=100 value=0>
            </p>
            <p>
                <label for="blur">Blur</label>
                <input id="blur" name="blur" type="range" min=0 max=10 value=0>
            </p>
            <p>
                <label for="br">Brightness</label>
                <input id="br" name="br" type="range" min=0 max=200 value=100>
            </p>
            <p>
                <label for="ct">Contrast</label>
                <input id="ct" name="ct" type="range" min=0 max=200 value=100>
            </p>
            <p>
                <label for="huer">Hue Rotate</label>
                <input id="huer" name="huer" type="range" min=0 max=360 value=0>
            </p>
            <p>
                <label for="opacity">Opacity</label>
                <input id="opacity" name="opacity" type="range" min=0 max=100 value=100>
            </p>
            <p>
                <label for="invert">Invert</label>
                <input id="invert" name="invert" type="range" min=0 max=100 value=0>
            </p>
            <p>
                <label for="sepia">Sepia</label>
                <input id="sepia" name="sepia" type="range" min=0 max=100 value=0>
            </p>
            <p>
                <label for="saturate">Saturate</label>
                <input id="saturate" name="saturate" type="range" min=0 max=500 value=100>
            </p>
            <input type="reset" form="imageEditor" id="reset" value="Reset" />
          </form>

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

$("#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();
});

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