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
  • 相关阅读:
    vue-cli 3.0 路由懒加载
    vue 路由拦截、axios请求拦截
    vue-cli 3.0 图片路径问题(何时使用 public 文件夹)
    vue 监听页面宽度变化 和 键盘事件
    WGS84、GCJ-02(火星坐标)、百度坐标,Web墨卡托坐标
    Java学习之道:Java项目打包发布
    ora-14550问题解决
    费氏搜寻法之算法分析与实现
    [置顶] woff格式字体怎么打开和编辑?
    C++小知识之Vector排序
  • 原文地址:https://www.cnblogs.com/afish/p/3929042.html
Copyright © 2011-2022 走看看