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
  • 相关阅读:
    MYSQL数据库常用语句
    node.js(http协议)
    web 后端规范与思想
    linux系统下开启一个简单的web服务
    linux基础学习之软件安装以及常用命令(三)
    Vue如何使用动态刷新Echarts组件
    linux基础学习之软件安装以及常用命令
    linux基础学习
    浅谈FIle协议与Http协议及区别
    vueJs的简单入门以及基础语法
  • 原文地址:https://www.cnblogs.com/afish/p/3929042.html
Copyright © 2011-2022 走看看