出于性能考虑,每个 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() { }); });