注册 登录
  • 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!

测试动态添加的元素 绑定jQuery绑定on事件

其他 开心洋葱 2531次浏览 已收录 0个评论 手机上查看

测试动态添加的元素 绑定jQuery绑定on事件

背景:
live方法在1.7中已经不建议使用,在1.9中删除了这个方法

    <title>测试动态添加的元素 绑定jQuery绑定on事件(on的用法)</title>
    <!---->
    <!---->
    <!--
    -->

        $(document).on("click", '.clickEve', function () {
            console.log($(this));
            alert("jquery on事件对动态添加的元素启了作用该button的 idValue=" + $(this).attr("id"));
        });

        // 开心洋葱测试多个事件绑定同一个函数
        $(document).on("mouseover    mouseout  ", '.clickEve', function () {
            alert("开心洋葱测试多个事件绑定同一个函数");
        });

        //写法一:开心洋葱测试多个事件绑定不同函数
        var data = { id: 5, name: "张三" };
        var events = {
            "mouseover": function (event) {
                alert("写法一mouseover=======" + event.data.name);
            },
            "mouseout  ": function (event) {
                alert("写法一mouseout");
            }
        };
        //为类".clickEve"绑定mouseenter mouseleave两个事件,并为其传入附加数据data
        $(document).on(events, ".clickEve", data);

        //写法二:开心洋葱测试多个事件绑定不同函数
        $(document).on({
            "mouseover  ": function () { alert("写法二:开心洋葱测试多个事件绑定不同函数mouseover"); },
            "mouseout  ": function () { alert("写法二:开心洋葱测试多个事件绑定不同函数mouseout"); },
            "click": function () { alert("写法二:开心洋葱测试多个事件绑定不同函数click"); }
        }, ".clickEve");

        $(function () {
            //var abc = "test";
            //alert($("#"+abc+" .aa").attr("data"));

            var htmlArry = [];
            for (var i = 0; i < 20; i++) {
                htmlArry.push("<br /><br /><br />");
            }
            var html = htmlArry.join('');
            console.log(html);
            $("#test").append(html);
        });

    <div id="test">

        <br />
        <br />
        <br />
    </div>


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明测试动态添加的元素 绑定jQuery绑定on事件
喜欢 (0)
[开心洋葱]
分享 (0)
关于作者:
开心洋葱,开心洋葱头,水墨

您必须 登录 才能发表评论!

加载中……