• 记录关于Ajax二次加载出的内容无法再次实现Ajax点击效果问题

    目录

    一、问题出现

    1.问题说明

    代码简述：
    页面加载开始时，通过Ajax获取下拉列表及全部表格信息
    通过选择下拉菜单的选项实现Ajax异步查询，
    通过点击任意“姓名”再次通过Ajax获取该人的详细信息并显示，

    问题出现：
    通过选择下拉菜单的选项实现Ajax异步查询的内容，
    无法再次通过点击任意“姓名”再次通过Ajax获取该人的详细信息并显示

    2.问题源码

    js代码（注意，需要jquery）

    $(function () {
    // 加载下拉列表
    $.ajax({
        "url": "select.do",
        "type": "post",
        "async": false,
        "data": "type=classes",
        "dataType": "json",
        "success":function (classesListStr) {
            let str = "";
            for (let i = 0 ; i < classesListStr.length; i ++){
                str = " + classesListStr[i].className + "--";
                $("#classes :last-child").after(str);
            }
        },
        "error":function () {
            alert("程序出错了")
        }
    })
    // 加载学生信息
    function studentNews(studentNewsListStr) {
        $("#studentsList").html("");
        $("#studentsList").append("\n" +
            "序号\n" +
            "学号\n" +
            "姓名\n" +
            "性别\n" +
            "联系电话\n" +
            "所在班级\n" +
            "");
        for (let i = 0 ; i < studentNewsListStr.length; i ++){
            let studentNews = studentNewsListStr[i];

            let str = "" + "" + (i + 1) + "" +
                                "" + studentNews.number + "" +
                                "+ studentNews.number + ">" + studentNews.name + "" +
                                "" + (studentNews.sex===1?"男":"女") + "" +
                                "" + studentNews.phone + "" +
                                "" + studentNews.classes.className + "" + 
                        "";
            $("#studentsList").append(str);
        }
    }

    $.ajax({
        "url": "select.do",
        "type": "post",
        "async": false,
        "data": "type=students",
        "dataType": "json",
        "success":function (studentNewsListStr) {
            studentNews(studentNewsListStr);
        },
        "error":function () {
            alert("程序出错了")
        }
    })
    // 根据下拉列表获取学生信息
    $("#classes").change(function () {
         let classId = $(this).val();
         $.ajax({
             "url": "select.do",
             "type": "post",
             "async": false,
             "data": "type=students&classId=" + classId,
             "dataType": "json",
             "success":function (studentNewsListStr) {
                 studentNews(studentNewsListStr);
             },
             "error":function () {
                 alert("程序出错了")
             }
         })
     })
    // 展示学生详细信息
    $(".name").click(function () {
        let number = $(this).attr("name");
        $.ajax({
            "url": "select.do",
            "type": "post",
            "data": "type=studentNews&number=" + number,
            "dataType": "json",
            "success":function (studentNews) {
                $("#show").html("");
                let str = "学生信息详情" +
                    "所在班级" + studentNews.classes.className + "" +
                    "学号" + studentNews.number + "" +
                    "姓名" + studentNews.name + "" +
                    "性别" + (studentNews.sex===1?"男":"女") + "" +
                    "联系电话" + studentNews.phone + "" +
                    "居住地" + studentNews.address + "" +
                    "专业方向" + studentNews.majors.major + "";
                $("#show").html(str);
            },
            "error":function () {
                alert("程序出错了")
            }
        })
    })
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100

    页面源码

    <html>
<head>
    <title>学生信息列表title>

    <link rel="stylesheet" type="text/css" href="css/allpages.css">
    <script src="js/jquery-1.12.4.min.js">script>
    <script src="js/studentList.js">script>
    <style>
        table tr:nth-child(odd) {
            background-color: rgb(173, 219, 231);
        }

        table tr:nth-child(even) {
            background-color: white;
        }

        table tr:first-child {
            background-color: rgb(148, 239, 148);
        }
        #show tr{
            background: white;
        }
        #show tr:first-child{
            background: blue;
        }
    style>
head>
<body>
<form>
    <select id="classes" name="classes">
        <option value="">--请选择班级--option>
    select>
form>
<table id="studentsList">
table>
<table id="show">
table>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    3.页面效果

    在这里插入图片描述
    在这里插入图片描述

    问题发生展示
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/b1edf6df5162462ea7edcf1769f99c8e.png)

    二、解决方案

    1.解决分析

    Ajax需要绑定有不变的元素，如其父级元素“table”，对于“table”这一标签而言，无论哪一个Ajax的加载都不会使其发生改变，可以作为事件绑定对象（绑定事件写法）

    2.发生改变的代码

    $(function () {
    // 加载下拉列表
    $.ajax({
        "url": "select.do",
        "type": "post",
        "async": false,
        "data": "type=classes",
        "dataType": "json",
        "success":function (classesListStr) {
            let str = "";
            for (let i = 0 ; i < classesListStr.length; i ++){
                str = " + classesListStr[i].className + "--";
                $("#classes :last-child").after(str);
            }
        },
        "error":function () {
            alert("程序出错了")
        }
    })
    // 加载学生信息
    function studentNews(studentNewsListStr) {
        $("#studentsList").html("");
        $("#studentsList").append("\n" +
            "序号\n" +
            "学号\n" +
            "姓名\n" +
            "性别\n" +
            "联系电话\n" +
            "所在班级\n" +
            "");
        for (let i = 0 ; i < studentNewsListStr.length; i ++){
            let studentNews = studentNewsListStr[i];

            let str = "" + "" + (i + 1) + "" +
                                "" + studentNews.number + "" +
                                "+ studentNews.number + ">" + studentNews.name + "" +
                                "" + (studentNews.sex===1?"男":"女") + "" +
                                "" + studentNews.phone + "" +
                                "" + studentNews.classes.className + "" + 
                        "";
            $("#studentsList").append(str);
        }
    }

    $.ajax({
        "url": "select.do",
        "type": "post",
        "async": false,
        "data": "type=students",
        "dataType": "json",
        "success":function (studentNewsListStr) {
            studentNews(studentNewsListStr);
        },
        "error":function () {
            alert("程序出错了")
        }
    })
    // 根据下拉列表获取学生信息
    $("#classes").change(function () {
         let classId = $(this).val();
         $.ajax({
             "url": "select.do",
             "type": "post",
             "async": false,
             "data": "type=students&classId=" + classId,
             "dataType": "json",
             "success":function (studentNewsListStr) {
                 studentNews(studentNewsListStr);
             },
             "error":function () {
                 alert("程序出错了")
             }
         })
     })
    // 展示学生详细信息
    $("table").on("click",".name",(function () {
        let number = $(this).attr("name");
        $.ajax({
            "url": "select.do",
            "type": "post",
            "data": "type=studentNews&number=" + number,
            "dataType": "json",
            "success":function (studentNews) {
                $("#show").html("");
                let str = "学生信息详情" +
                    "所在班级" + studentNews.classes.className + "" +
                    "学号" + studentNews.number + "" +
                    "姓名" + studentNews.name + "" +
                    "性别" + (studentNews.sex===1?"男":"女") + "" +
                    "联系电话" + studentNews.phone + "" +
                    "居住地" + studentNews.address + "" +
                    "专业方向" + studentNews.majors.major + "";
                $("#show").html(str);
            },
            "error":function () {
                alert("程序出错了")
            }
        })
    }))
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100

    3.触发效果

    在这里插入图片描述

  • 相关阅读:
    移植RTOS的大体思路
    IPKISS Tutorials ------merge elements(合并对象)
    一个反向代理神器 ——Nginx Proxy Manager
    英国2.8万的A-Level学生拿不到offer
    Redis分布式锁一文全攻略
    java8新特性-Optional
    分布式结构下，Session共享有什么方案
    JavaScript课堂练习
    我与C++的爱恋:模板初阶和STL库
    Linux shell之重定向
  • 原文地址：https://blog.csdn.net/jule_zhou/article/details/127694802