layui模板引擎中的内容加点击事件无效是怎么回事？？

蔚落 2022-11-06 14:53 181阅读 0赞

> <div id="rolelistview"></div>
> 
> <script type="text/html" id="rolelisttpl">  
>                   <ul class="rolelist">  
>                 \{ \{\# layui.each(d, function(i,v)\{\}\}  
>                       <li><img src="/static/images/system/user.png"  /><h5>\{ \{v.rolename\}\}</h5></li>  
>                 \{ \{\#  \}) \}\}  
>                   </ul>  
>           </script>

我希望点击li加上一个active的class。我们想到的正常的写法是这样的

$(".rolelist li").on('click',function()\{  
      $(this).addClass("active").siblings().removeClass("active");  
\})

但是加到页面上没有效果。那是因为我们的位置放的不对啊。如果模板内容还没有加载肯定就找不到这个rolelisttpl啦。

**模板内容的点击事件这个需要加在模板引擎加载之后的位置。**

var data=\[

\{roleid: 288, rolename: "总管理员", sitetype: "10", roledesc: "", schid: 4, issystem: "1"\},

\{roleid: 289, rolename: "教研中心教研员", sitetype: "10", roledesc: "", schid: 4, issystem: "1"\},

\{roleid: 290, rolename: "校区行政老师", sitetype: "10", roledesc: "", schid: 4, issystem: "1"\}

var rolelisttpl=$("\#rolelisttpl").html();  
                        laytpl(rolelisttpl).render(data,function(html)\{  
                            $("\#rolelistview").html(html)  
                        \})  
                          
                        $(".rolelist li").on('click',function()\{  
                          $(this).addClass("active").siblings().removeClass("active");  
                        \})