layui 相册层问题-点击两次图片才能实现图片预览

问题:

    使用layer.photos时,需要点击两次图片才能实现预览

原因:

    layer.photos自带点击事件,但我的ul有多个 是循环生成的 要通过当前被点击的id去实现它下面的图片预览,所以我的同事又给它加了一个点击事件导致

  <tbody>
            {foreach name="data_list" item="vo" key="kk"}
            <tr {if condition="$vo.pid gt 0"}style="background-color: #f2f2f2;"{/if}>
            	<td class="font12">{if condition="$vo.pid gt 0"} 企业回复{else /}客服 {$vo['name']} 跟进{/if}</td>
                <td class="font12" style="width: 300px;">{$vo['content']}
                {if condition="$data_info.pics neq ''"}
                <ul class="picLists" id="layer-photos{$vo.id}" data-pid="{$vo.id}">
                 {foreach name="$vo.pics" item="vv"}
                    <li>
                        <img src="/{$vv}" layer-src="/{$vv}">
                    </li>
                {/foreach}
                </ul>
                {/if}
                </td>
                <td class="font12">{:date('Y-m-d H:i',$vo['create_time'])}</td>
            </tr>
            {/foreach}
  </tbody>

    $('.picLists').click(function(e){
        var pid = $(this).data('pid');
        //图片查看
		layer.photos({
			photos: '#layer-photos'+pid,
			anim: 5, //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
			offset: '200px'
		});
    })

 解决办法(有点Low):

        获取到带有data-pid的所有ul,通过它的长度去循环,这样就避免了再次增加点击事件,得以解决该问题

	for(var i = 0;i<$('ul[data-pid]').length;i++){
		//图片查看
		    layer.photos({
			photos: '#layer-photos'+i,
			anim: 5, //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
			offset: '200px'
		});
	}	

如果你有更好的解决办法,欢迎留言