JQuery插件多个实例触发两次答案

【问题标题】：JQuery plugin multiple instance fires twiceJQuery插件多个实例触发两次
【发布时间】：2017-06-10 10:12:45
【问题描述】：

我有一个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 变量绑定了两次。

我在这里做错了什么？

【问题讨论】：

你在哪里检查options，它定义了真假退出？我相信，既然你没有检查，它提交两个按钮，因此可能是两次？？
@MilanChheda 你想让我在这里发布 1000 行该插件吗？
显示的代码中没有任何内容会产生这种行为。提供minimal reproducible example
@charlietfl 我认为这篇文章有足够的洞察力来思考这个问题。并且不应关闭。

标签： jquery plugins jquery-plugins

【解决方案1】：

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

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

而不是

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

【讨论】：

谢谢。我试过你的解决方案。但它仍然会触发两次。
按钮点击事件正常触发。问题出在其他地方。
您的页面是否会重新加载两次