JQuery插件多个实例触发两次

时间:2017-06-10 10:12:46

标签: jquery plugins jquery-plugins

我有一个html表格如下 -

 <form>
    <button id="btn1">Save & Add</button>
    <button id="btn2">Save & Return</button>
 </form>

这些按钮与我的jquery插件绑定如下 -

 $('#btn1').SwiftSave({ exit: false }, null, null, null, null, null);
 $('#btn2').SwiftSave({ exit: true  }, null, null, null, null, null);

这是我的插件 -

(function ($) {

    $.fn.SwiftSave = function (options,validationRules, onBeforeSend, onSuccess, onError, onComplete) {

           return this.each(function () {

            var $This = $(this);

            var settings = $.extend({
               ....
            }, options);

            var $Form = $This.parents('form');
            $This.on('click', function (event) {
                event.preventDefault();
                $Form.submit();
            });

            //This event fires twice
            $Form.on('submit', function (event) {
                event.preventDefault();
                event.stopPropagation();
                SubmitFormAsAuto();                    
            });

            function SubmitFormAsAuto() {
                var $SeriallizedData = $Form.serialize();         
                $.ajax({....});
            }
        });
    };
}(jQuery));

问题是,表单正在提交两次。我检查了按钮点击事件。它正常发射。问题出在其他地方。

也许,form.on('submit'...)已与$ Form变量绑定两次。

我在这里错了什么?

1 个答案:

答案 0 :(得分:0)

我认为您的点击事件会触发两次,因为它与按钮两次绑定 试试这段代码

$This.off('click'),on('click', function (event) {

而不是

$This.on('click', function (event) {