and
Geek asks and answers

Touch event does not fire AJAX using jQuery plugin - Hammer.js

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

I have an AJAX event that fires with a mouse click (dynamic and dependent menus). Regardless of what the first click of the menu determines the contents of the next menu. This works great on desktops and laptops, but not on mobile devices. You will need to double-click the menu before AJAX loads 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 ); 
});
});

Thanks in advance.

+3
source share
2 answers

, Hammer.js. .click() .change(), .

:

$("#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 ); 
 });
});

.

0

drag and swipe. .

, .

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

More articles:


All Articles