0

基本的に、テーブルの選択された行のデータを共通のテキスト ボックスまたは div に表示するこのスクリプトがあります。スクリプトは、ページが初めて読み込まれたときに完全に正常に動作しますが、ajax で読み込まれたコンテンツでは実行できません。.delegate または .on の使用に関するフォーラムのスレッドをいくつか確認しました。クリック、マウスエンター、マウスリーブで使用できますが、バインドでは機能しません...「tr.bind」を「$(document).delegate($('#Student_List').find('tr' ),'click', function(event)" でもうまくいきません... :-(( 助けてください。

ID StudentDetails の部門で Ajax Content をロードしています。

前もって感謝します。

<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 に答える