JQuery Ajax更新dom后点击方法失效问题

最新推荐文章于 2022-06-20 20:12:07 发布

本心_

最新推荐文章于 2022-06-20 20:12:07 发布

阅读量710

点赞数

分类专栏： JavaScript 文章标签： javascript jquery ajax

本文链接：https://blog.csdn.net/weixin_40571331/article/details/115857581

版权

JavaScript 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

背景：本人在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>

本心_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JQuery Ajax更新dom后点击方法失效问题

背景：本人在dom加载完成后，执行一个Ajax请求页面的导航栏标题，数据请求往后通过操作dom更新到页面上，并写好了绑定该元素的点击方法，但是发现点击方法无效$(element).click(function() { do something...})分析原因：Ajax请求是在dom首次加载完成后执行，然后再动态更新到dom，而上面对元素绑定的点击方法，是在dom首次加载完成后进行绑定，此时Ajax请求可能刚发出，当dom重新加载完成后，此时click事件不会重新绑定，即click事件绑
复制链接

扫一扫

专栏目录