title: jquery trigger button click, and get value of dynamic select/option
body: <p>I am trying to get 'value' of dynamically generated &lt; option > on button click, it <strong>works</strong> when I physically press button but when I call: $("#view").trigger('click'); all I get is <strong>undefined</strong></p>
  
  <p><strong>EDIT:</strong> Updated code</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"&gt;
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;script&gt;
      $(document).ready(function() {
          var placeholder = $("#test");
  
          var yearList = $("&lt;select /&gt;", {'class': 'form-sth', 'id': 'year-list'});
          var weekList = $("&lt;select /&gt;", {'class': 'form-sth', 'id': 'week-list'});
          var fileList = $("&lt;select /&gt;", {'class': 'form-sth', 'id': 'file-list'});
  
          var viewButton = $("&lt;button /&gt;", {'class': 'btn btn-default', 'id': 'view', 'text': 'view'});
  
          function populate(list, base_dir, prefix, postfix, bFiles) {
              $.ajax({
                  url: 'stat.php',
                  type: 'GET',
                  data: { dir: base_dir, files: (bFiles == true) ? '1' : '0' },
                  dataType: 'json',
                  success: function(json) {                   
                      json.content.forEach(function(entry) {
                          var option = $("&lt;option /&gt;", {'value': prefix + entry + postfix, 'text': entry} );
  
                          list.append(option);
                      });
  
                      var lastOption = list.children('option:last-child');
  
                      lastOption.attr('selected', 'selected');
                      lastOption.trigger('change');
                  }
              })
          }
  
          var baseDir = '/var/www/_cronjob/data/ups-stats/';
  
          populate(yearList, baseDir, '', '/', false);
  
          yearList.on('change', function() {
              console.log('#year-list : onChange()');
  
              var selectedOption = $('#year-list option:selected');
  
              populate(weekList, baseDir + selectedOption.attr('value'), selectedOption.attr('value'), '/', false);
          })
  
          weekList.on('change', function() {
              console.log('#week-list : onChange()');
  
              var selectedOption = $('#week-list option:selected');
  
              populate(fileList, baseDir + selectedOption.attr('value'), selectedOption.attr('value'), '', true);
          })
  
          var delay = 1500;
  
          yearList.appendTo(placeholder).hide().fadeIn(delay);
          weekList.appendTo(placeholder).hide().fadeIn(delay);
          fileList.appendTo(placeholder).hide().fadeIn(delay);
          viewButton.appendTo(placeholder).hide().fadeIn(delay);
  
          viewButton.on('click', function() {
              console.log('#view : onClick()');
              var option = $('#file-list option:selected');
  
              console.log(baseDir + option.attr('value'));
          })
  
          console.log('button click! ...');
          $("#view").trigger("click");
      });
  
  &lt;/script&gt;
  
  &lt;div id="test"&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Example output of stat.php?dir=/var/www/&amp;files=1</p>
  
  <pre><code>{"content":["index.php","test.php"]}
  </code></pre>
  
  <p>I don't understand this, could someone please explain why is this happening and how to solve this?</p>
  
  <p><strong>EDIT:</strong> I have placed many console.log() functions to trace what is going on and I have figured that code that generates &lt; options > is executed <strong>after</strong> I simulate button click.</p>
  
  <p><strong>Details</strong>: 
  I have 3 &lt; select > lists. first contains year folders, second: week folders and third: file names. At the begining I am loading 'year' folders and then it's something like chain reaciton: onChange() function of each &lt; select > is loading data for next &lt; select ></p>
  
  <p><a href="http://i.stack.imgur.com/rlUwY.png" rel="nofollow">http://i.stack.imgur.com/rlUwY.png</a></p>