0

我有这个脚本，它基本上在普通文本框或 div 中显示表格中选定行的数据。该脚本在第一次加载页面时工作得很好，但我无法让它在 ajax 加载的内容上运行。我在论坛上查看了几个关于使用 .delegate 或 .on 的帖子。我可以将它们与 click、mouseenter、mouseleave 一起使用，但它不能与 bind 一起使用...我尝试将 "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>
4

1 回答 1

1

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

$(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()));         

    });
});
于 2013-09-26T19:18:32.200 回答