zmaze中am-modal-confirm按钮事件数据缓存问题

出于性能考虑,每个 Modal 实例都存储在对应元素的 $('.am-modal').data('amui.modal') 属性中,

onConfirm/onCancel 会保存第一次运行 Modal 时候的数据,导致在某些场景不能按照预期工作。

具体例子如下:

第一步:调用CCC('aaa')

第二步:调用AAA(),点击确认打印 aaa

第三部:调用CCC('bbb')

第四步:调用AAA(),点击确认打印 aaa

function AAA(){
    var param = $("#id").val();
    $("#promotion-confirm").modal({
        relatedTarget: this,
        closeViaDimmer:false,
        onConfirm: function(options) {
            BBB(param);
        },
        onCancel: function() {
            
        }
    });
}

function CCC(val) {
    $("#id").val(val)
}

function BBB(param) {
    console.log(param);
}

明显以上数据是有问题的。具体解决思路如下:

1、通过 relatedTarget 这个钩子获取数据,如上面的演示,以该元素为桥梁获取想要的数据,针对jquery对象

$('#confirm').modal({
    relatedTarget: this,
    onConfirm: function(options) {
        var $link = $(this.relatedTarget).prev('a');
        alert($link.data('id'));
    },
    onCancel: function() {
    }
});

2、每次都重新给这两个按钮事件赋值

function Test(){
    var $confirm = $('#my-confirm');
    var confirm = $confirm.data('amui.modal');
    var onConfirm = function() {
    };
    var onCancel = function() {
    }
    if (confirm) {
        confirm.options.onConfirm =  onConfirm;
        confirm.options.onCancel =  onCancel;
        confirm.toggle(this);
    } else {
        $confirm.modal({
            relatedElement: this,
            onConfirm: onConfirm,
            onCancel: onCancel
        });
    }
}

3、Confirm 关闭后移除暂存的实例,再次调用时重新初始化;

//关闭窗口的时候删除数据
$(this).removeData('amui.modal');

4、重写 cancel/confirm 按钮的事件处理函数

$(function() {
    var $confirm = $('#confirm');
    var $confirmBtn = $confirm.find('[data-am-modal-confirm]');
    var $cancelBtn = $confirm.find('[data-am-modal-cancel]');
    $confirmBtn.off('click.confirm.modal.amui').on('click', function() {
    });

    $cancelBtn.off('click.cancel.modal.amui').on('click', function() {
    });
});
原文地址:https://www.cnblogs.com/tianxia-09/p/8067265.html