JQuery Ajax更新dom后点击方法失效问题
背景:本人在dom加载完成后,执行一个Ajax请求页面的导航栏标题,数据请求往后通过操作dom更新到页面上,并写好了绑定该元素的点击方法,但是发现点击方法无效
$(element).click(function() {
do something...
})
分析原因:Ajax请求是在dom首次加载完成后执行,然后再动态更新到dom,而上面对元素绑定的点击方法,是在dom首次加载完成后进行绑定,此时Ajax请求可能刚发出,当dom重新加载完成后,此时click事件不会重新绑定,即click事件绑定是无效的,所以没有点击效果
解决方案:
1.(推荐)使用jQuery的另一个绑定事件
$(document).on('click', element, function() {
do something...
})
2.使用原生JS函数,在请求完数据更新dom的函数中,给对应元素绑定方法 οnclick="clickFunc",编写clickFunc方法
在此种情形中,可以适当优化代码,当我们请求Ajax拿到的数据是列表型的,给每个导航分类添加 οnclick="clickFunc"过于冗余,可以在外层包一层div并添加id,用js方法监听此元素,编写点击事件,每个导航分类应该会有用于区分的元素(导航文字、属性值等),以此来作为相应的点击对象。如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="test">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
</ul>
<script>
window.onload = function() {
let arr = document.getElementById('test').getElementsByTagName('li')
for (let el of arr) {
el.onclick = function() {
console.log(this.innerText)
}
}
}
</script>
</body>
</html>