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

最新推荐文章于 2024-10-12 17:05:37 发布

jule_zhou

最新推荐文章于 2024-10-12 17:05:37 发布

阅读量329

点赞数

分类专栏： # JavaScript 前端文章标签： ajax javascript ecmascript

本文链接：https://blog.csdn.net/jule_zhou/article/details/127694802

版权

前端同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

JavaScript

7 篇文章 1 订阅

订阅专栏

一、问题出现

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 = "<option value='" + classesListStr[i].id +  "'>--" + classesListStr[i].className + "--</option>";
                $("#classes :last-child").after(str);
            }
        },
        "error":function () {
            alert("程序出错了")
        }
    })
    // 加载学生信息
    function studentNews(studentNewsListStr) {
        $("#studentsList").html("");
        $("#studentsList").append("<tr id=\"one\">\n" +
            "<td>序号</td>\n" +
            "<td>学号</td>\n" +
            "<td>姓名</td>\n" +
            "<td>性别</td>\n" +
            "<td>联系电话</td>\n" +
            "<td>所在班级</td>\n" +
            "</tr>");
        for (let i = 0 ; i < studentNewsListStr.length; i ++){
            let studentNews = studentNewsListStr[i];

            let str = "<tr>" + "<td>" + (i + 1) + "</td>" +
                                "<td>" + studentNews.number + "</td>" +
                                "<td class='name' name=" + studentNews.number + ">" + studentNews.name + "</td>" +
                                "<td>" + (studentNews.sex===1?"男":"女") + "</td>" +
                                "<td>" + studentNews.phone + "</td>" +
                                "<td>" + studentNews.classes.className + "</td>" + 
                        "</tr>";
            $("#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 = "<tr><td colspan='2'>学生信息详情</td></tr>" +
                    "<tr><td>所在班级</td><td>" + studentNews.classes.className + "</td></tr>" +
                    "<tr><td>学号</td><td>" + studentNews.number + "</td></tr>" +
                    "<tr><td>姓名</td><td>" + studentNews.name + "</td></tr>" +
                    "<tr><td>性别</td><td>" + (studentNews.sex===1?"男":"女") + "</td></tr>" +
                    "<tr><td>联系电话</td><td>" + studentNews.phone + "</td></tr>" +
                    "<tr><td>居住地</td><td>" + studentNews.address + "</td></tr>" +
                    "<tr><td>专业方向</td><td>" + studentNews.majors.major + "</td></tr>";
                $("#show").html(str);
            },
            "error":function () {
                alert("程序出错了")
            }
        })
    })
})

页面源码

<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>

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 = "<option value='" + classesListStr[i].id +  "'>--" + classesListStr[i].className + "--</option>";
                $("#classes :last-child").after(str);
            }
        },
        "error":function () {
            alert("程序出错了")
        }
    })
    // 加载学生信息
    function studentNews(studentNewsListStr) {
        $("#studentsList").html("");
        $("#studentsList").append("<tr id=\"one\">\n" +
            "<td>序号</td>\n" +
            "<td>学号</td>\n" +
            "<td>姓名</td>\n" +
            "<td>性别</td>\n" +
            "<td>联系电话</td>\n" +
            "<td>所在班级</td>\n" +
            "</tr>");
        for (let i = 0 ; i < studentNewsListStr.length; i ++){
            let studentNews = studentNewsListStr[i];

            let str = "<tr>" + "<td>" + (i + 1) + "</td>" +
                                "<td>" + studentNews.number + "</td>" +
                                "<td class='name' name=" + studentNews.number + ">" + studentNews.name + "</td>" +
                                "<td>" + (studentNews.sex===1?"男":"女") + "</td>" +
                                "<td>" + studentNews.phone + "</td>" +
                                "<td>" + studentNews.classes.className + "</td>" + 
                        "</tr>";
            $("#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 = "<tr><td colspan='2'>学生信息详情</td></tr>" +
                    "<tr><td>所在班级</td><td>" + studentNews.classes.className + "</td></tr>" +
                    "<tr><td>学号</td><td>" + studentNews.number + "</td></tr>" +
                    "<tr><td>姓名</td><td>" + studentNews.name + "</td></tr>" +
                    "<tr><td>性别</td><td>" + (studentNews.sex===1?"男":"女") + "</td></tr>" +
                    "<tr><td>联系电话</td><td>" + studentNews.phone + "</td></tr>" +
                    "<tr><td>居住地</td><td>" + studentNews.address + "</td></tr>" +
                    "<tr><td>专业方向</td><td>" + studentNews.majors.major + "</td></tr>";
                $("#show").html(str);
            },
            "error":function () {
                alert("程序出错了")
            }
        })
    }))
})