js 为动态添加的元素绑定事件

JavaScript015

js 为动态添加的元素绑定事件,第1张

想必大家都有遇到过,DOM动态添加的元素,你给它绑定的事件是不起作用的。目前有两种办法,为动态添加的元素绑定事件

⚠️ 动态添加的子元素一定要放在on()方法里面,并且on()方法里面的 childSelector 必须要是 selector 的子元素,否则动态添加的元素绑定的事件依旧无效

对于一些简单的html页面,里面的js文件加载的也少的情况下,可以使用火狐的firebug或者google的控制台都可以轻松的查看.

火狐浏览器的查看方法安装Firebug然后按F12选中要看的dom元素在右侧的事件中可以详细的看到绑定了那些事件.

Google浏览器也可以用同样的方法查看对应dom元素绑定的事件.

F12-->Elements-->Event Listenners

但是对于一些复杂的Html页面,相当于加载的js文件和相应的插件也比较多,这个时候用浏览器自带的事件查看器就显得力不从心了!

所以遇到这种情况,,就得借助google的Visual Event插件帮助快速定位,所以首先去google 扩展库去下载对应的插件并安装.

安装成功后浏览器的右上角会出现一个小眼睛.

等页面加载完之后,点击小眼睛然后大概过不了5秒钟,就可以看到页面上元素绑定事件了.

最后移动鼠标到想查看的元素上面就可以看到对于的js文件已经和对应的事件名

最好是在元素生成的时候就加上事件,不然的话比较麻烦。

在jquery中,你也可以用live()和delegate()这样的方法绑定元素,是实时监听的。

但是最好还是在元素生成的时候就加上事件:

$('#btn').bind('click', function(event) {

    /* Act on the event */

    $("<li>Hello</li>").appendTo("#list").bind('click', function(event) {

      /* Act on the event */

      console.log($(this).text())

    })

    

  })

在mootools中对应的方法:

// Creating an new anchor with an Objectvar myAnchor = new Element('a', {

    href: 'http://mootools.net',

    'class': 'myClass',

    html: 'Click me!',

    styles: {

        display: 'block',

        border: '1px solid black'

    },

    events: {

        click: function(){

            alert('clicked')

        },

        mouseover: function(){

            alert('mouseovered')

        }

    }})