title: Fire AJAX when value selected from dropdown
body: <p>I'm making a simple dropdown menu that i'm showing only when a user is using a mobile device on our website. The goal is to have the user select a value and have this value <code>post</code> trough AJAX. </p>
  
  <p>I've got this all working for non mobile devices using normal links (<code>a href's</code>), but on mobile devices I can't seem to get it to work. Here is what I've got so far.</p>
  
  <p><strong>My Simple dropdown menu</strong></p>
  
  <pre><code>&lt;select id="dropdown-mobile" name="Select-item"&gt;
      &lt;option&gt;Select something ... &lt;/option&gt;
      &lt;option class="class-x" href="#" data-value="item-A" data-name="item-A" value="item-A"&gt;item-A&lt;/option&gt;
      &lt;option class="class-x" href="#" data-value="item-B" data-name="item-B" value="item-B"&gt;item-B&lt;/option&gt;
      &lt;option class="class-x" href="#" data-value="item-C" data-name="item-C" value="item-C"&gt;item-C&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><strong>My AJAX script</strong></p>
  
  <pre><code>$(document).ready(function()  {
      $('option.class-x').click(function(e){
          var datalist = $(this).data('value');
          var dataname = $(this).data('name');
          console.log(datalist,dataname);
          $.ajax({
              type: "POST",
              url: "/loop-change.php",
              data:{datalist:datalist,dataname:dataname},
              success: function(response) {
  
                          if ($("#content").html() != response) {
                              $('.loadscreen').delay(1000).fadeOut(500);
                          $("#content").fadeIn(3000, function() {
                              $('a').removeClass('clicked');
                          $("#content").html(response);
                              $('a[data-value = '+datalist+']').addClass('clicked');                      
                              $("#content").fadeIn(3000);
                              $('.loadscreen').delay(1000).fadeOut(500);
                      });
                  }
              }
          });
          return false;
  
      });
  
  });
  </code></pre>
  
  <p>It seems like there is nothing selected. When I use this code on that normal links the <code>console.log</code> shows the correct information, but not the dropdown menu.</p>
  
  <p>What I've tried so far:
  Of course I've searched google and came across some examples, like:</p>
  
  <pre><code>$('option.class-x').change(function(e){
         // Your event handler
         alert('Selected');
      });
  </code></pre>
  
  <p>Also I've tried this:</p>
  
  <pre><code>$(document).on('change', 'option.class-x', function(){
      console.log("list item selected");
      // do whatever here
  });
  </code></pre>
  
  <p>If I use the Bootstrap dropdown menu with my working code, it all works fine. But I think the mobile devices don't register the <code>click</code> function. I've read about the <code>touch</code> function or something. But that hasn't worked for me. </p>
  
  <p>I would like to just use the normal dropdown and have the mobile device default dropdown option to show.</p>
  
  <p>Like this iOS:</p>
  
  <p><a href="https://i.stack.imgur.com/i6ROE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i6ROE.png" alt="iOS"></a></p>
  
  <p>And this Android:</p>
  
  <p><a href="https://i.stack.imgur.com/ONaCO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ONaCO.png" alt="Android"></a></p>
  
  <p>But noting works. What am I doing wrong? Here is the code from my working normal link and AJAX call (it doesn't work in Fiddle but it works on my site) <a href="https://jsfiddle.net/dk3mnk8w/" rel="nofollow noreferrer">https://jsfiddle.net/dk3mnk8w/</a>. I hope someone here know what I'm doing wrong.</p>