欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JQ动态生成节点绑定事件无效问题

程序员文章站 2023-11-21 15:49:40
最近做项目的时候遇见了一个问题,通过jq将动态节点绑定到dom节点上,并且为动态节点绑定方法,此方法再次为动态节点添加动态节点,但在刷新之后,动态节点上的方法失效了,过程为:创建动态节点->动态节点绑定方法->添加动态节点->刷新后点击动态节点方法失效。 ......

最近做项目的时候遇见了一个问题,通过jq将动态节点绑定到dom节点上,并且为动态节点绑定方法,此方法再次为动态节点添加动态节点,但在刷新之后,动态节点上的方法失效了,过程为:创建动态节点->动态节点绑定方法->添加动态节点->刷新后点击动态节点方法失效。

<!doctype html>
<html>
<head></head>
<body>
  <div id="lidata">

  </div>
</body>
</html>

1、首先通过ajax获取到管理员管理多少个班级
-------------------
| 班级1            |
-------------------
| 班级2            |
-------------------
|                      |
|                      |
|                      |
|                      |
|                      |
|                      |
-------------------

...ajax
success: function (res) {
  for (i = 0; i < res.data.length; i++) {
    var collegelist = '<ul class="......">' +
              '<li class="......">' +
                '<a class="......" onclick="getpro(\''+res.data[i].id+'\')">' + res.data[i].fullname + '</a>' +
                '<div class="......" id="' + res.data[i].id + '">' +

                '</div>'
              '</li>' +
            '</ul>';
  $("#lidata").append(collegelist);
}
......

2、点击对应班级添加班级学生
--------------------
| 班级1(active) |
--------------------
| 学生1        |
| 学生2        |
| 学生3             |
| 学生4             |
| 学生...            |
-------------------
| 班级2             |
|           |
--------------------

function getpro(id){
...ajax
success: function (ress) {
  for (j = 0; j < ress.data.length; j++) {
    var list = '<li class="...... ">' +
          '<a class="......">' +
            '<p class="......">姓名:' + ress.data[j].studentname + '</p>' +
            '<p class="......">学号:' + ress.data[j].studentid + '</p>' +
            '<p class="......">性别:' + ress.data[j].sex + '</p>' +
            '<p class="......">院系:' + ress.data[j].college + '</p>' +
            '<p class="......">专业:' + ress.data[j].professionalname + '</p>' +
            '<p class="......">班级:' + ress.data[j].organname + '</p>' +
          '</a>' +
        '</li>';
  $("#" + id+ "").append(list);
  }
}
}
......

3、刷新后会发现,点击班级加载不出学生来,于是采用同步加载的方式勉强实现

...ajax
success: function (res) {
  for (i = 0; i < res.data.length; i++) {
    var organid = res.data[i].id;
    var collegelist = '<ul class="......">' +
              '<li class="mui-table-view-cell mui-collapse">' +
                '<a class="......">' + res.data[i].fullname + '</a>' +
                '<div class="......" id="' + res.data[i].id + '">' +

                '</div>'
              '</li>' +
            '</ul>';
    $("#lidata").append(collegelist);
    $.ajax({
      ......
      async: false,//同步,但并非好办法
      success: function (ress) {
        for (j = 0; j < ress.data.length; j++) {
          var list = '<li class="...... ">' +
                '<a class="......" onclick="showinfo(' + ress.data[j].studentid + ')">' +
                  '<p class="......">姓名:' + ress.data[j].studentname + '</p>' +
                  '<p class="......">学号:' + ress.data[j].studentid + '</p>' +
                  '<p class="......">性别:' + ress.data[j].sex + '</p>' +
                  '<p class="......">院系:' + ress.data[j].college + '</p>' +
                  '<p class="......">专业:' + ress.data[j].professionalname + '</p>' +
                  '<p class="......">班级:' + ress.data[j].organname + '</p>' +
                '</a>' +
              '</li>';
        $("#" + organid + "").append(list);
        }
      }
    })
  }
}

4、网上找了很多解决方案,学习了委托,其作用在于
1)提高性能
  对于多个相同的操作,如果足一操作,会影响性能
2)重复事件
  新添加了元素还要触发之前的事件,而之前事件已经执行完,导致不再触发(我的错误就属于此类)
  $("...").click(function(){
    let list='<button class="btn">jq添加节点</button>';
    $("...").append(list);
  })


  $("btn").click(function(){
  //方法无效
  })


  $("父节点").on('click','button',function(){
    //通过事件委托完成,有效
  })

ps:当时很想明白我犯的错误的原理,但网上全是例子,没有详细说明原因,很是苦恼,最后找到一个讲解比较详细还很通俗易懂的帖子,分享给大家:
https://blog.csdn.net/a_csdner/article/details/76164986

小结:
$('...').bind('click',function(){
  //这就是事件不委托,每个按钮有自己的事件
})
$('#btn').delegate('.button','click',function(){
  //这就是事件委托,
})
$('#btn').undelegate('.button','click')//取消绑定