Jquery bind 不适用于 AJAX 加载的内容

Jquery bind doesnt work on AJAX loaded content

本文关键字：加载 AJAX bind 不适用 适用于 Jquery      更新时间：2023-09-26

我有这个脚本，它基本上在通用文本框或div中显示表格中所选行的数据。 该脚本在页面首次加载时工作得很好，但我无法让它在 Ajax 加载的内容上运行。我在论坛上检查了几个关于使用 .delegate 或 .on 的线程。我可以通过单击、鼠标输入、鼠标离开来使用它们，但它不适用于绑定......我尝试将"tr.bind"替换为"$（document）.delegate（$（'#Student_List'）.find（'tr'），'click'， function（event）"，但没有运气...... ：-（（请帮忙。

我正在与id StudentDetails一起划分Ajax内容。

提前谢谢。

<script type=Javascript/text>    
$(function() {
    var tr = $('#Student_List').find('tr');
    //$(document).delegate($('#Student_List').find('tr'),'click', function(event) {
    tr.bind('click', function(event) {
        tr.removeClass('row-highlight');
        var tds = $(this).addClass('row-highlight').find('td');
        var studentId = document.getElementById("STUDENT_ID");
        studentId.innerHTML = $(this).children("td:nth-child(1)").text();
        var sName = document.getElementById("STUDENT_NAME");
        sName.innerHTML = $.trim($(this).children("td:nth-child(2)").text());
        $("#STUDENT_PROJECTS").val($.trim($(this).children("td:nth-child(3)").text()));         
    });
});
</script>
<body>
    <div id="StudentDetails">
        <span>Student ID:</span><span id="STUDENT_ID"></span>
        <br/>
        <span>Student Name:</span><span id="STUDENT_NAME"></span>
        <br/>
        <input type="text" name="STUDENT_PROJECTS" id="STUDENT_PROJECTS"/>
        <br/>
        <table id="Student_List">
            <tr><td>1</td><td>James</td><td>Project 1</td></tr>
            <tr><td>2</td><td>Maria</td><td>Project 2</td></tr>
            <tr><td>3</td><td>Frank</td><td>Project 3</td></tr>
        </table>
    </div>
</body>

正如其他人在评论中指出的那样，您需要在非动态父级上使用委托：

$(function() {
    $('#StudentDetails').on('click', '#Student_List tr', function(event) {
        $('#Student_List tr').removeClass('row-highlight');
        var tds = $(this).addClass('row-highlight').find('td');
        var studentId = document.getElementById("STUDENT_ID");
        studentId.innerHTML = $(this).children("td:nth-child(1)").text();
        var sName = document.getElementById("STUDENT_NAME");
        sName.innerHTML = $.trim($(this).children("td:nth-child(2)").text());
        $("#STUDENT_PROJECTS").val($.trim($(this).children("td:nth-child(3)").text()));         
    });
});
相关文章：