Question

我正在创建我的简单jQuery插件，可用于附加任何操作的确认。但是面对非常奇怪的问题，它适用于单个元素点击，但是当我要点击第二个元素，它也与我的插件绑定它工作正常，但它也激发了以前点击的元素。

(function ($) {

$.fn.BootConfirm = function (options) {
    // Establish our default settings
    var settings = $.extend({
        message: 'Are you sure about this ?',
        complete: null
    }, options);

    var self = this;
    var cointainer = '\
                    <div class="modal fade" id="confirmBoot" role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true">\
                      <div class="modal-dialog">\
                        <div class="modal-content">\
                          <div class="modal-header">\
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>\
                            <h4 class="modal-title">Confirm action</h4>\
                          </div>\
                          <div class="modal-body">\
                            <p>Are you sure about this ?</p>\
                          </div>\
                          <div class="modal-footer">\
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>\
                            <button type="button" class="btn btn-success btn-ok" id="confirm">Ok</button>\
                          </div>\
                        </div>\
                      </div>\
                    </div>';

    return this.each(function () {
        var self = this;
        $(this).click(function () {
            if (!$('#confirmBoot').length) {
                $('body').append(cointainer);
            }
            if (settings.message) {
                $('#confirmBoot').find('.modal-body').text($(this).attr('data-confirm'));
            }
            $('#confirmBoot').modal({ show: true });

            if ($.isFunction(settings.complete)) {
                $('#confirmBoot').find('.btn-ok').click(function () {                        
                    $.when(settings.complete.call(this, self)).done(function () {
                        $('#confirmBoot').modal("hide"); // Alerts "123"
                    });
                });
            }
        });
    });
}
}(jQuery));

这是我的回调函数：

function kaushik(myObject) {
ManageAcriveProducts(myObject);
};

我按照以下方式打电话

$('a[data-confirm]').BootConfirm({
        complete: kaushik
    });

有关详细信息，请查看此js fidder Jsfiddle。任何人都可以分享可能的解决方案或更好的方法来做到或者有更好的方法来实现这一目标吗？

Answer 1

问题是，您在启动确认对象上的每个点击事件上为btn-ok分配了一次点击。每次点击都会链接到已点击的对象，因此每次点击btn-ok时，它都会在您的回调中结束。

一个简单的修复，虽然我不确定它是最好的，但是在动作完成后删除你的btn-ok上的点击。像这样：

      $.when(settings.complete.call(this, self)).done(function () {
               $('#confirmBoot').modal("hide");
               $('#confirmBoot').find('.btn-ok').off('click');
       });

工作小提琴：http://jsfiddle.net/ywunutyw/

编辑：

对以前的解决方案稍有改进，可能需要一些调整，因为我没有查看细节，但它应该给你一些想法。要防止在每次用户点击按钮时添加click事件并将其删除，您可以在每个活动/非活动按钮的click行为之外的模态窗口上定义click。点击活动/非活动，您可以定义将在模态确认中使用的目标。像这样：

在使用this.each调用行为之前：

$(document).on('click', '#confirmBoot .btn-ok',
        function (e) {
            if ($.isFunction(settings.complete)) {
                console.log(self)
                $.when(settings.complete.call(this, click_origin)).done(function () {
                    $('#confirmBoot').modal("hide");

                });
            }
            });

然后在您处于活动/不活动的点击事件中：

click_origin = e.target;

请参阅小提琴：http://jsfiddle.net/ywunutyw/1/

为什么我的插件会触发多重回调或点击

1 个答案: