Touch event not firing AJAX using jQuery Plugin -- Hammer.js

Question

I have included <script src="hammer.js"></script> and <script src="../jquery.hammer.js-master/jquery.hammer.js"></script> correctly in my header.

I have an AJAX event that is fired by a mouse click (dynamic and dependent menus). Whichever of the first menu click on determines the content of the next menu. This working fine on desktops and laptops but not on mobile devices. You will have to tap on the menu twice before AJAX will load the next menu.

HTML Code:

<label> Choose a Menu:</label>
<select id="menu" name="menu" class="menu">
<option class = 'option' value = '1'>Whatsapp</option>
<option class = 'option' value = '2'>19Billion USD</option>
<option class = 'option' value = '3'>Facebook</option>
</select>
<p id = 'news'> </p>

jQuery AJAX:

$("#menu").click(function()  
{  
    var menuId = $(this).val();
    var request = $.ajax({
      url: "news.php",
      type: "POST",
      data: { id : menuId },
      dataType: "html"
    });

    request.done(function( msg ) {
      $("#news").html( msg ); 
    });
});  

Hammer.js code:

var element = document.getElementById('menu');
var hammertime = Hammer(element).on("tap", function(event) {
var menuId = $('#menu').val();
var request = $.ajax({
  url: "news.php",
  type: "POST",
  data: { id : menuId },
  dataType: "html"
});

request.done(function( msg ) {
  $("#news").html( msg ); 
});
});

Thank you, in advance.

Answer 1

I later solved the problem without even using Hammer.js. I just changed the .click() to .change() and everything is working perfectly.

Here is the working code:

$("#menu").change(function()  
{  
var menuId = $(this).val();
var request = $.ajax({
  url: "news.php",
  type: "POST",
  data: { id : menuId },
  dataType: "html"
});

 request.done(function( msg ) {
   $("#news").html( msg ); 
 });
});  

Thank you all.

Answer 2

add drag and swipe event. first tab may be recoginzed as drag or swipe.

please print all touch event type to console.

var hammertime = Hammer(element).on("tap drag swipe", function(event) {