微信端开发 如何给未加载的元素添加click事件

来源:互联网 发布:远方光电人工智能 编辑:程序博客网 时间:2024/06/04 20:33

       项目手段:项目前端页面使用 ajax请求数据 填充 至html ,并使用dot模板解析

     今天问题:由于使用AJAX异步请求本身可能存在延迟,并且使用模板解析html时   都会导致 页面元素 未加载完成,直接使用click事件无法捕捉

     相关代码:

     1.引用dot.js

     2. 添加  <ul class=""  id="dataList" page="1"></ul>

     3. 页面添加模板解析

<script  id="template_focus" type="text/x-dot-template">          <li>              <div>                  <a href="javascript:void(0);"><img/></a>                  <dl>                      <dt></dt>                      <dd>                          <span></span>                          <a class="atten_btn attened" id="atten_btn99" targetid="99" type="1">点一下</a>                      </dd>                  </dl>              </div>          </li></script>
      4.  jquery中解析模板 并用ajax填充html
var pagefn = doT.template($('#template_focus').html());
$.get(addr, function (data) {   $('#dataList').html((JSON.parse(data)));});     5.要获取这里的点一下按钮,由于可能在加载时未生成该对象,所以有如下方法来解决      @1:使用on 事件冒泡在父元素上截获事件然后匹配事件源是否符合预先设定的选择器。取代live(过期已删除)      较Live有更好的性能,因为其第二个参数可以选择除document外的元素(包括document)
$("#dataList").on('click','a.atten_btn',function(e){   var _this=$(this);   if(_this.hasClass("atten_btn")) {      if (_this.hasClass("attened")) {         alert(1);      } else {  
         alert(2);
} }});
@2:第一种原理写法,获取事件源
$("#dataList").click(function(e){   var _this= $(e.srcElement|| e.target);  
   if(_this.hasClass("atten_btn")) {      if (_this.hasClass("attened")) {         alert(1);      } else {  
         alert(2);
}
}});

结束 ~~~~~~~~~~~~~~~~~~~
-------------------------------------------分隔线--------------------------------------------------------------------------------




0 0
原创粉丝点击