0

在Johan回答上一个关于 Deferred object的问题之后，我创建了以下代码：

var modalConfirm = (function ($) {

    var dfd = $.Deferred();

    var cls = function () {

        this.title = arguments[0].title;
        this.text = arguments[0].text;

        var t = new Date().getTime();

        var html = '<div class="modal show" id="modal-confirm' + t + '">\n';
        html += '   <div class="panel">\n';
        html += '       <h2>' + this.title + '</h2>\n';
        html += '       <p>' + this.text + '</p>\n';
        html += '       <div class="buttons">\n';
        html += '           <input type="button" id="confirm-yes' + t + '" value="Yes">\n';
        html += '           <input type="button" id="confirm-no' + t + '" value="No">\n';
        html += '       </div>\n';
        html += '    </div>\n';
        html += '</div>\n';
        html += '<div id="modal-overlay' + t + '" class="overlay"></div>\n';

        $('body').append(html);

        $('#confirm-no' + t).click(function () {
            mHideConfirm(t);
            dfd.reject({ modal: null });
        });
        $('#confirm-yes' + t).click(function () {
            mHideConfirm(t);
            dfd.resolve({ modal: null });
        });
    }

    cls.prototype = {
        yes: dfd.promise().done,
        no: dfd.promise().fail
    };

    return cls;

})(jQuery);

function mHideConfirm(t) {
    $('#modal-confirm' + t).remove()
    $('#modal-overlay' + t).remove();
}

$('#lst').dblclick(function() {
    new modalConfirm({ title: 'A title', text: 'A text' })
    .yes(function() {
        console.log('YES');
    })
    .no(function() {
        console.log('NO');
    });
});

这正如我第一次所期望的那样，通过显示modal-confirmdiv、解析或拒绝（基于单击的按钮）然后隐藏 div ( mHideConfirm)。（我添加了t以防万一存在一些 ID 唯一性问题 - 没有）

当dblclick随后发生时，就会出现问题。该过程会自动Deferred从前一个实例中触发事件。因此，如果我第一次单击是dblclick，当第二次发生时，会在没有单击按钮的情况下触发。

似乎该dfd变量未使用新对象重新初始化，modalConfirm或者至少不在click按钮或cls.prototype.

任何想法或建议将不胜感激。

4

1 回答 1

0

您正在为该类的所有实例重用相同的延迟/承诺对象，相反，您需要为每个实例创建一个新对象。

var modalConfirm = (function ($) {

    var cls = function () {

        var dfd = $.Deferred();
        this.title = arguments[0].title;
        this.text = arguments[0].text;

        var t = new Date().getTime();

        var html = '<div class="modal show" id="modal-confirm' + t + '">\n';
        html += '   <div class="panel">\n';
        html += '       <h2>' + this.title + '</h2>\n';
        html += '       <p>' + this.text + '</p>\n';
        html += '       <div class="buttons">\n';
        html += '           <input type="button" id="confirm-yes' + t + '" value="Yes">\n';
        html += '           <input type="button" id="confirm-no' + t + '" value="No">\n';
        html += '       </div>\n';
        html += '    </div>\n';
        html += '</div>\n';
        html += '<div id="modal-overlay' + t + '" class="overlay"></div>\n';

        $('body').append(html);

        $('#confirm-no' + t).click(function () {
            mHideConfirm(t);
            dfd.reject({ modal: null });
        });
        $('#confirm-yes' + t).click(function () {
            mHideConfirm(t);
            dfd.resolve({ modal: null });
        });
        this.yes = dfd.done;
        this.no = dfd.fail;
        return this;
    }

    return cls;

})(jQuery);

然后您可以简单地：

(function ($) {

    var modalConfirm = function () {

        var dfd = $.Deferred();
        this.title = arguments[0].title;
        this.text = arguments[0].text;

        var t = new Date().getTime();

        var html = '<div class="modal show" id="modal-confirm' + t + '">\n';
        html += '   <div class="panel">\n';
        html += '       <h2>' + this.title + '</h2>\n';
        html += '       <p>' + this.text + '</p>\n';
        html += '       <div class="buttons">\n';
        html += '           <input type="button" id="confirm-yes' + t + '" value="Yes">\n';
        html += '           <input type="button" id="confirm-no' + t + '" value="No">\n';
        html += '       </div>\n';
        html += '    </div>\n';
        html += '</div>\n';
        html += '<div id="modal-overlay' + t + '" class="overlay"></div>\n';

        $('body').append(html);

        $('#confirm-no' + t).click(function () {
            mHideConfirm(t);
            dfd.reject({ modal: null });
        });
        $('#confirm-yes' + t).click(function () {
            mHideConfirm(t);
            dfd.resolve({ modal: null });
        });
        this.yes = dfd.done;
        this.no = dfd.fail;
        return this;
    }

    window.modalConfirm = modalConfirm;

})(jQuery);
于 2013-09-18T15:10:42.340 回答