jquery监听事件on,jquery添加监听事件

jquery用on绑定事件

$(function(){

    $('.btn').click(function(){

        $('body').append('button class-"btn"/button');

        //注意上句错误。append的字符串中应该是button class="btn"/button 

    });

    $('.btn').on('click',function(){

        console.log('haha');

    });

    //上面绑定的方式也不对。因为页面刚加载时$('.btn')并不包括后来生成的button。

    //而且你第一个button，和之后生成的button。都是class="btn"这样就没法区别了。

    //所以最好的方式是，页面本身存在的button和之后生成的button，不要叫一个名字。

    //比如第一个button的class叫做btn-default，之后生成的button的class叫做btn-append

});

重新给你写一个例子。看下面：

HTML文件

html

head

script src="jquery.js"/script

title演示/title

/head

body

button id="btn-default"默认按钮/button

/body

/html

javascript文件

$('#btn-default').on('click', function(){

    $('body').append('button class="btn-append"生成的按钮/button');

});

$(document).on('click', '.btn-append', function(){

    console.log('你刚才点击了动态添加的按钮');

});

动态添加的按钮因为是后来才有的，所以必须采用上述时间代理的方式，来监听事件。

相关问答

Q1: JQuery的on()监听方法使用

jquery.on()超级方法

归纳

在jquery的on方法中实现事件委托就更简单了，on方法可以接受三个参数：

第一个参数是事件名，可以只绑定一个事件，如on('click'),也可以绑定多个事件，如on('click dbclick mouseover')等

第二个参数是可选参数，接受一个selector,当事件触发元素符合selector时，会调用事件处理函数

注：此处用到 li:even 选择器，后面有注解

第三个参数是自定义事件处理的回调函数。

1.jQuery :even 选择器

选取每个带有偶数 index 值的元素（比如 2、4、6）

index 值从 0 开始，所有第一个元素是偶数 (0)

2.jQuery :odd 选择器

选取每个带有奇数 index 值的元素（比如 1、3、5）

Q2: jquery绑定事件on()方法

events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略，当它到达选定的元素，事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

当第二个参数'selector'为null时，on()和bind()其实在用法上基本上没有任何区别了，所以我们可以认为on()只是比bind()多了一个可选的'selector'参数，所以on()可以非常方便的替换掉bind()

在 1.4之前相信大家非常喜欢使用live(),因为它可以把事件绑定到当前以及以后添加的元素上面，当然在1.4之后delegate()也可以做类似的事情了。live()的原理很简单，它是通过document进行事件委派的，因此我们也可以使用on()通过将事件绑定到document来达到 live()一样的效果。

1、live()写法

2、on()写法

这里的关键就是第二个参数'selector'在起作用了。它是一个过滤器的作用，只有被选中元素的后代元素才会触发事件。

delegate() 是1.4引入的，目的是通过祖先元素来代理委派后代元素的事件绑定问题，某种程度上和live()优点相似。只不过live()是通过document元素委派，而delegate则可以是任意的祖先节点。使用on()实现代理的写法和delegate()基本一致。

1、delegate()的写法

2、on()写法

貌似第一个和第二个参数的顺序颠倒了一下，别的基本一样。