zoukankan      html  css  js  c++  java
  • jquery html动态添加的元素绑定事件详解

    在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况:

    <div id="testdiv">
      <ul></ul>
    </div>
    

      

    <div id="testdiv">
      <ul>
     
       <li name="apple">apple</li>
       <li name="pear">pear</li>
     
      </ul>
    </div>
    <script>
     
    function test(name){
      alert("I'm "+name);
     
    }
     
    //做法如下:
     
    $("#testdiv ul").on("click","li", function() {
      //test($(this).attr("name"));
      //do something here
    });
     
    //主动触发某个<li>的click事件
     
    // $("#testdiv ul li[name='apple']").trigger("click");
     
    </script>
    

      

    但对于ajax添加进来的html代码段,如$("#xx").html(html内容),如果想里面的元素也会触发我们定义的事件,必须委托

    需要用到事件委托,比如:

    普通绑定事件:$('.btn1').click(function(){}绑定

    on绑定事件:$(document).on('click','.btn2',function(){})绑定  .btn是ajax加载的html内容样式选择器

  • 相关阅读:
    TSQL语句
    约束
    数据库创建
    递归
    函数
    结构体
    集合
    jquery中的select
    正则表达式
    多表单提交
  • 原文地址:https://www.cnblogs.com/evemen/p/6241351.html
Copyright © 2011-2022 走看看