Question

I have a simple table which has a some information displayed. To view the details of that row i have a javascript function:

$('#production tr').bind("click", function(){
    reviewProductionOrder(this);
});

This lets me select the row and display information appropriately. However i have a date picker on top which filters the results accordingly

$('#view').bind("click", function(){
    var from_date = $('#from_date').val();
    var to_date = $('#to_date').val();

    $.ajax({
         type : "post", url : "data.php", data : "from_date=" + from_date + "&to_date=" + to_date,
         success : function(data) {
         if(data != '')
             $('#production tbody').html(data);
         }
    });
});

The function above lets me add the data to the table. Now i thought that bind would let me bind the javascript function to the newly generated rows. However when i click on those rows, i am unable to do so.

Answer 1

Use on()

$('#production').on('click' , 'tr', function() {
    // your processing here
});

the $(document) part must be a parent element the element you want to listen on the event for, from the on() doc page :

Delegated events have the advantage that they can process events from
descendant elements that are added to the document at a later time. By
picking an element that is guaranteed to be present at the time the
delegated event handler is attached, you can use delegated events to
avoid the need to frequently attach and remove event handlers. This
element could be the container element of a view in a
Model-View-Controller design, for example, or document if the event
handler wants to monitor all bubbling events in the document. The
document element is available in the head of the document before
loading any other HTML, so it is safe to attach events there without
waiting for the document to be ready.