zoukankan      html  css  js  c++  java
  • 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() {
        });
    });
  • 相关阅读:
    Java日志框架Slf4j+Log4j入门
    Pandas常用函数入门
    Noip2018 倒计时
    【缩点】洛谷P3387
    用Visio进行数据库建模、设计和实现
    SQL Server 教程
    MS TransactSQL 存储过程的解密算法
    泛型编程
    网络实现语音
    Visual C++ 例程下载
  • 原文地址:https://www.cnblogs.com/tianxia-09/p/8067265.html
Copyright © 2011-2022 走看看