layui form on触发多次的问题

ThinkAdmin后台使用的layui框架,其中的data-open,和data-modal存在一些使用上的问题。例如table表有两个功能项。编辑,增加。

编辑是data-modal

增加是data-open

其中都使用了form.on

复现步骤如下:先点击编辑,然后点击增加。会发现增加里面触发了编辑的form.on事件。百度了一下也没有结果,没办法去查看了layui的源码。

绑定事件源码:

//表单事件监听
  Form.prototype.on = function(events, callback){
    return layui.onevent.call(this, MOD_NAME, events, callback);
  };

调用了一个call

Layui.prototype.onevent = function(modName, events, callback){
    if(typeof modName !== 'string' 
    || typeof callback !== 'function') return this;
    return Layui.event(modName, events, null, callback);
  };

查看event事件

//执行自定义模块事件
  Layui.prototype.event = Layui.event = function(modName, events, params, fn){
    var that = this
    ,result = null
    ,filter = events.match(/\((.*)\)$/)||[] //提取事件过滤器字符结构,如:select(xxx)
    ,eventName = (modName + '.'+ events).replace(filter[0], '') //获取事件名称,如:form.select
    ,filterName = filter[1] || '' //获取过滤器名称,,如:xxx
    ,callback = function(_, item){
      var res = item && item.call(that, params);
      res === false && result === null && (result = false);
    };
    
    //添加事件
    if(fn){
      config.event[eventName] = config.event[eventName] || {};
      //这里不再对多次事件监听做支持,避免更多麻烦
      //config.event[eventName][filterName] ? config.event[eventName][filterName].push(fn) : 
      config.event[eventName][filterName] = [fn];
      return this;
    }
    
    //执行事件回调
    layui.each(config.event[eventName], function(key, item){
      //执行当前模块的全部事件
      if(filterName === '{*}'){
        layui.each(item, callback);
        return;
      }
      
      //执行指定事件
      key === '' && layui.each(item, callback);
      (filterName && key === filterName) && layui.each(item, callback);
    });
    
    return result;
  };
  win.layui = new Layui();

其中可以看到 

config.event[eventName][filterName] = [fn];

可以将事件重置,所以在增加里面重新绑定编辑的事件就可以了,function可以设置为空。


layui form on触发多次的问题


本站如无特别说明即为原创,转而告知:(http://iwonmo.com/archives/1612.html)

标签: layui, on, off, jq

添加新评论