JQuery绑定动态元素事件问题

实际场景

在一个网盘页面添加新建文件夹，确定后，在页面里追加元素。如果直接使用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');
    });

其中fileBody是tr的父级元素。

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

参考资料来自SegmentFault

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