Jquery bind doesnt work on AJAX loaded content

Question

I have this script which basically shows the data of the selected row of the table in common text box or in div. the script works perfectly fine with when the page load first time, but i can't get it going on the ajax loaded content. I checked couple of thread on the forum about using .delegate or .on. I can use them with click, mouseenter, mouseleave, but its not working with bind... i tried replacing "tr.bind" with "$(document).delegate($('#Student_List').find('tr'),'click', function(event)" but no luck ... :-(( please help.

I am laoding Ajax Content in division with id StudentDetails.

Thanks in advance.

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

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Jason P, Sep 26 '13 at 18:42
You need to bind a delegated click event, plenty of examples on the web! — Mark Pieszak - Trilon.io, Sep 26 '13 at 18:43
It does work with ajax loaded content. you just have to make sure you actually use it ON the ajax loaded content. — Kevin B, Sep 26 '13 at 18:44
I tried it with .on but no luck, I also tried with $('#StudentDetails').on('click',$('#Student_List').find('tr'), function(event) { — Brijesh, Sep 26 '13 at 19:04

score 1 · Accepted Answer · answered Sep 26 '13 at 19:18

As others have pointed out in the comments, you need to use a delegate on a non-dynamic parent:

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

    });
});

this works like a charm, thanks for pointing me out in right direction, it was my bad, i was just changing the first line didn't realize i have to change the next line as well "$('#Student_List tr').removeClass('row-highlight');" Thanks Steve — Brijesh, Sep 26 '13 at 19:37

Jquery bind doesnt work on AJAX loaded content

1 Answers1