转：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 );

继续啃~

 

 

文章转自：https://blog.csdn.net/zhaozjc112/article/details/51849799