Question

我正在尝试允许客户创建学生列表，然后只需单击带有学生姓名的按钮即可查看更多信息。我已经创建了按钮并在按钮中显示学生姓名，但是当我单击“提交”将学生添加到列表时，它只调用该功能，实际的学生按钮似乎不起作用。

function updateStudentList() {
    var html = "";

    for (var i = 0; i < students.length; i++) {
        html += "<li><button type='button' class='studentButton'" + "id=" + students[i].name +">" + students[i].name + "</button></li>";
    }

    $('#studentList').html(html);

    for (var i = 0; i < students.length; i++) {
        document.getElementById(students[i].name).addEventListener('click', openStudentInfo(students[i].name));
    }
}

function openStudentInfo(studentName) {
    console.log("Opening " + studentName + " info.");

    var studentInfo = requestStudentByName(studentName);

    if (studentInfo != null) {
        var studentInfoForm = $("#studentInfoForm");
        var html = "";

        html += "<h3>Student Name: " + studentInfo.name + "</h3>";
        html += "<h3>Student ID: " + studentInfo.studentID + "</h3>";

        studentInfoForm.html(html);

        $("#studentInfoModal").show();
    } 
}

HTML：

<ul data-role="listview" id="studentList"> </ul>

注意：我无法在HTML中使用onclick标记，这会导致安全问题。科尔多瓦也阻止了这一点。

Answer 1

绑定事件的方式不正确。尝试以这种方式绑定：

$(document).ready(function() {
    $("#studentList").on("click", ".studentButton", function() {
        var studentId = $(this).data("studentid");
        openStudentInfo(studentId);
    });
});

在您的HTML生成中：

html += "<li><button type='button' class='studentButton' data-studentid='" + students[i].studentID +"'>" + students[i].name + "</button></li>";

这种事件的爆燃工作不会影响你如何在根元素（在这种情况下为studentList）中创建元素，因为事件是绑定在它中的，而不是动态元素。

Answer 2

没有Jutery版本的DontVoteMeDown的回答

document.getElementById('studentList').addEventListener('click', function(event) {
    var clickedEl = event.target;
    if(clickedEl.className === 'studentButton') {
        var studentId = clickedEl.dataset.studentId;
        openStudentInfo(studentId);
    }
});

创建学生列表并为每个按钮分配功能

2 个答案: