javascript - Bind live change listener to a select box

Question

I have a table in which one column contains a select box. I need to bind a listener to any select activity so as to change some properties of my table row based on which row's select box has been changed. So as its apparent I do not have a fix id for a select box. Following is the code that I was trying but it is not working. More rows maybe added to the table in the future so a live listener is necessary.

$('#datatable').on('change', '.MediaType  select' function(){
    console.log('Changed');
    //console.log($(this.find('select :selected').text()));
});

Here MediaType is the class of the enclosing td element. 'datatable' is my table's id. Could somebody please suggest a solution.

Corrected Version Is Below:

$('#datatable').on('change', '.MediaType  select' function(){
console.log('Changed');
    //Below line to get value of selected
console.log($(this, ':selected').val()));

});

Answer 1

As .MediaType is td containing the span, you want to bind change event to span and not to the td

You can remove that ,

$('#datatable').on('change', '.MediaType select' 

to get the selected value :

$(this).val();

Answer 2

Be sure #datatable is in DOM at time you try to set handler:

$(function () { // DOM ready handler
    $('#datatable').on('change', '.MediaType  select', function () {
        console.log('Changed');
    });
});

If datatable is a dynamic element too, use as delegate target the closest static container, here as i don't know your HTML, i'm using document object:

 $(document).on('change', '#datatable .MediaType  select', function () {
     console.log('Changed');
 });