Question

I have an ajax query which pulls some JSON data and generates me a row for each user with several select elements using .append() this works great. An example of one of the selects it generates is below:

    <select name="mailBox" id="mailBox1" class="mailbox">
      <option value="25">25 GB</option>
      <option value="50" selected="selected">50 GB</option>
      <option value="75">75 GB</option>
      <option value="100">100 GB</option>
      <option value="0">No Mail Box</option>
    </select>   

What I would like to do is when the user changes the selected value I would like to then do an ajax post to update the database, however I am having trouble detecting the change request

I have tried this:

$(function() {
    $('select').change(function(){
        // I have just stuck an alert in to show me if it has detected the change
    alert('hello');
    });
});

I have also tried using $('.mailbox') and also referencing the id directly $('#mailBox1') and can’t detect any change. Code works fine if the select boxes are static html.

EDIT* Full jQuery code:

$(function() {
      var csrf = $('[name="csrf_test_name"]').val();
       $.ajax({                                      
              url: '/index.php/ajax/getCompanyUsers', data: {csrf_test_name: csrf}, dataType: 'json',  success: function(data)        
              {
                for (var i in data)
                {

                    var email = data[i].email;
                    var files = data[i].file;
            
                    var emailForm = '<select name="mailBox" id="mailBox' + paramID + '" class="mailbox"><option value="25">25 GB</option><option value="50">50 GB</option><option value="75">75 GB</option><option value="100">100 GB</option><option value="0">No Mail Box</option></select>  ';
                    var filesForm = '<select name="fileStorage" id="fileStorage' + paramID + '" class="filestorage"><option value="25">25 GB</option><option value="50">50 GB</option><option value="75">75 GB</option><option value="100">100 GB</option><option value="0">No File Storage</option></select>';
                      
                  $('#wrapper').append('<div class="company-users-email">' + emailForm + '</div>' + '<div class="company-users-filestorage">' + filesForm + '</div>');
                                                            
                 $("#mailBox" + paramID + " option[value='" + email + "']").attr("selected","selected");
                 $("#fileStorage" + paramID + " option[value='" + files + "']").attr("selected","selected");
                                
                } 
              } 
            });
            
          $('.mailbox').bind("change", function(e){ alert("hello") });      
});

Answer 1

this works:

$(function() {
    $('#mailBox1').bind("change", function(e){ alert("hello") });
});

http://jsfiddle.net/ej8Aa/