zoukankan      html  css  js  c++  java
  • jquery 未来元素事件示例 on() delegate() live()

    jquery 1.7版后建议使用on()

    $(document).on("click","#green",function(){$(this).after('<a target="_blank" href="http://www.cnblogs.com/afish">小鱼阁</a>');});
    $(document).delegate("#green", "click", function(){$(this).after('<a target="_blank" href="http://www.cnblogs.com/afish">小鱼阁</a>');});
    $("#green").live("click", function(){$(this).after('<a target="_blank" href="http://www.cnblogs.com/afish">小鱼阁</a>');});

    下面是示例代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>jquery 未来元素事件示例 on() delegate() live()</title>
    <style>
    #green{ border:3px solid #ddd; 200px; height:100px}
    .green{ border:3px solid #900; 200px; height:100px}
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    $(document).ready(function(){
        $("#button").one("click", function(){
            $(this).after('<p id="green">我是点击按钮新增的元素,点击我也可以增加一个段落</p>');
        });
        $(document).on("click","#green",function(){
            var $this = $(this);
            if (!$this.data('isClick')){//判断是否点击过一次,限制只执行一次以下代码,与one功能类似
                $this.data('isClick', 1);
                $(this).after('<p class="green">我是点击未来元素新增的段落</p>');
            }
        
        });
    });
    </script>
    </head>
    
    <body>
    <input name="button" id="button" type="button" value="增加一个段落" />
    </body>
    </html>
    转载请注明出处!小鱼阁工作室 -专注zencart建站,织梦企业建站,ecshop商城,二次开发,产品采集,模板修改!技术QQ 631992791
  • 相关阅读:
    POJ 1953 World Cup Noise
    POJ 1995 Raising Modulo Numbers (快速幂取余)
    poj 1256 Anagram
    POJ 1218 THE DRUNK JAILER
    POJ 1316 Self Numbers
    POJ 1663 Number Steps
    POJ 1664 放苹果
    如何查看DIV被设置什么CSS样式
    独行DIV自适应宽度布局CSS实例与扩大应用范围
    python 从入门到精通教程一:[1]Hello,world!
  • 原文地址:https://www.cnblogs.com/afish/p/3929042.html
Copyright © 2011-2022 走看看