Jquery 动态加载HTML页面导致js事件失效

动态补充的HTML页面如果是直接使用 click() change() 等事件绑定的话,是无法触发的

原因:本来HTML DOM就不存在动态加载的元素,页面加载完后,肯定是找不到元素绑定事件的,所以只能实时绑定

第一种方式:delegate()
语法:

$(selector).delegate(event,childSelector,data,function)

event 绑定事件

childSelector 绑定的元素

data 需要传的参数

function 函数

用法如下:
例如绑定鼠标离开事件 mouseleave

$('.download_file').delegate('.download_file_list>div', 'mouseleave', function(){
    //do something
});

第二种方式:on()
语法:

$(selector).on(event,childSelector,data,function)  参数是一样的

这个是JQuery 1.7版本之后出现的,好像是用来替代 delegate(), live(),bind() 等函数的
用法是一样的只是参数位置互换了下

$('.download_file').on('mouseleave','.download_file_list>div', function(){
//do something
});

如果只运行一次的事件然后移除,使用 one() 方法。

如果移除事件处理程序,使用 off() 方法。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,538评论 1 11
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,142评论 1 32
  • 1.ios高性能编程 (1).内层 最小的内层平均值和峰值(2).耗电量 高效的算法和数据结构(3).初始化时...
    欧辰_OSR阅读 29,612评论 8 265
  • 小王最近总是因一些小事情而发火,感到不开心。比如同事总是不能如他所愿很快把要用到的资料发给他而心生郁闷不开心...
    阑十三阅读 461评论 3 13
  • 今天去了上大一的时候就想去的古德寺,照片上这个寺庙建筑风格偏西方,众尖顶耸立,有点哥特式建筑的风味,今天坐了近一个...
    七月瓶子阅读 835评论 0 0