Question

我有这个脚本，它基本上显示了常用文本框或div中表格的选定行的数据。当第一次加载页面时，脚本工作得非常好，但是我无法将它加载到ajax加载的内容上。我在论坛上查了几个关于使用.delegate或.on的帖子。我可以使用click，mouseenter，mouseleave，但它不能使用bind ...我尝试将“tr.bind”替换为“$（document）.delegate（$（'＃Student_List'）。find（'tr' ），'点击'，功能（事件）“但没有运气......： - （（请帮助。

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

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

    });
});

Jquery绑定不适用于加载AJAX的内容

1 个答案: