jquery给动态dom绑定事件

    如果需要给一个按钮绑定事件,在jquery中一般是这样实现的。

$("#id").click(function(){
     console.log("hello world!");
});

    但是在给动态生成的dom绑定事件的时候,无法绑定了。查询了jquery API,如果需要给还不存在的节点绑定事件,可以通过on方法解决这个问题,即事件委托。

    在jQuery 中,通过事件冒泡的特性,让子元素绑定的事件冒泡到父元素或祖先元素上,然后再进行相关处理即可,如果是后来动态生成的子元素,可以自动给其绑定事件。

$("#parentId").on('click','.children',function(){
     console.log("hello world!");
});

    与此同时,取消绑定可以使用off()方法。

    on()方法在1.7版本后推出,除了on()方法,还有 live() bind() delegate() 实现类似的功能,live()方法是在1.9版本以后已经废弃,bind(),delegate()和on()有什么区别,大概看了下源码。

jQuery.fn.extend( {

    bind: function( types, data, fn ) {
        return this.on( types, null, data, fn );
    },
    unbind: function( types, fn ) {
        return this.off( types, null, fn );
    },

    delegate: function( selector, types, data, fn ) {
        return this.on( types, selector, data, fn );
    },
    undelegate: function( selector, types, fn ) {

        // ( namespace ) or ( selector, types [, fn] )
        return arguments.length === 1 ?
            this.off( selector, "**" ) :
            this.off( types, selector || "**", fn );
    },
    size: function() {
        return this.length;
    }
} );

    bind(),delegate()的底层实现都是调用on()方法,至于on()方法,源码中通过event.add方法实现。

jQuery.event.add( this, types, fn, data, selector );

继续啃~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值