jquery绑定动态元素事件问题

前端 2017-06-15

实际场景

在一个网盘页面添加新建文件夹,确定后,在页面里追加元素。如果直接使用click()bind()会出现加载页面时不存在的元素(也就是后来追加到页面的元素)没有绑定点击事件。

确定新建文件夹

在页面新生成的文件夹,却没有点击事件,也就是我无法框选它等等。


解决方法

  • 使用.on(events, selector, callback)解决
    events:监听的事件
    selector:绑定事件的元素
    callback:事件触发的回调函数

举个例子

fileBody.on('click', 'tr', function () {
        if (!$(this).hasClass('tr-hover')) {
            //  增加选中样式
            $(this).addClass('tr-hover');
            $(this).find('span').addClass('tr-click');
            i++;
        } else {
            //  移除选中样式
            $(this).removeClass('tr-hover');
            $(this).find('span').removeClass('tr-click');
            i--;
        }
        //  网盘具体功能的显示隐藏
        i > 0 ? $('.btn-group').css('display', '') : $('.btn-group').css('display', 'none');
        i > 1 ? $('.newName').addClass('disabled') : $('.newName').removeClass('disabled');
    });

其中fileBodytr的父级元素。

  • 使用.live()解决 不建议已被废除

参考资料来自SegmentFault


感谢小武不杀之恩,为了写博客,我们又被暴雨困在B9了。


本文由 阿涛 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

还不快抢沙发

添加新评论