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() 方法。

你可能感兴趣的:(Jquery 动态加载HTML页面导致js事件失效)