Access elements after form is loaded using jquery

Access elements after form is loaded using jquery

In the form there are 2 drop down which are created dynamically after the page loads. I have written a jquery function which will be called when 1st drop down value changes. But when I try to access the dynamically created form field value it says TypeError: e.nodeName is undefined. 


 
    
    
     
  1. function
    2. 
     
  2.  flavorDefn(e) {
    3. 
     
  3.  var locationid = $(e).attr('id'); 
    4. 
     
  4.  var idArray = locationid.split('-');
    5. 
     
  5.  var id = idArray[1];
    6. 
     
  6.  var flavorDef="flavorDefs"+id;
    7. 
     
  7.  $("#"+flavorDef).prop("disabled", true);
    8. 
     
  8.  $.getJSON('flavorDefinitions.wss', {
    9. 
     
  9.  location : $(this).val(),
    10. 
     
  10.  ajax : 'true'
    11. 
     
  11.  }, function(data) {
    12. 
     
  12.  $("#"+flavorDef).prop("disabled", false);
    13. 
     
  13.  var html = '';
    14. 
     
  14.  var len = data.length;
    15. 
     
  15.  for ( var i = 0; i < len; i++) {
    16. 
     
  16.  html += '<option value="' + data[i].id+
    17. 
     
  17.  '" id="'+data[i].id+'">'
    18. 
     
  18.  + data[i].cpus+' CPU '+data[i].ram+' MB RAM
    19. 
     
  19.  '+data[i].disk+' GB DISK '+ '</option>';
    20. 
     
  20.  }
    21. 
     
  21.  html += '</option>';
    22. 
     
  22.  $("#"+flavorDef).html(html);
    23. 
     
  23.  });
    24. 
     
  24.  } 
    25. 
    
<select name="locationName" id="location-<%=patternBO.getId()%>" onchange="flavorDefn(this)"> <select name="flavorDefs" id="flavorDefs<%=patternBO.getId()%>">