JavaScript

Im trying to make a swipe event , on page 1 its can be swipe to the page 2 , but from page 2 its not working , what is wrong here ? its only works on page 1 , what shall i do ? (Page mostly code , i need more char) Im trying to make a swipe event , on page 1 its can be swipe to the page 2 , but from page 2 its not working , what is wrong here ? its only works on page 1 , what shall i do ?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#page1",function(){
  $("p").on("swiperight",function(){
    $('#page1').fadeOut();
    $('#page2').fadeIn();
    $('#page3').fadeOut();
  });                       
});
$(document).on("pagecreate","#page2",function(){
  $("p").on("swiperight",function(){
    $('#page1').fadeOut();
    $('#page2').fadeOut();
    $('#page3').fadeIn();
  });                       
});
$(document).on("pagecreate","#page3",function(){
  $("p").on("swiperight",function(){
    $('#page1').fadeOut();
    $('#page2').fadeOut();
    $('#page3').fadeIn();
  });                       
});
</script>
</head>
<body>

<div data-role="page" id="page1">
  <div data-role="main" class="ui-content">
    <p style="border:1px solid black;margin:5px;">PAGE 1</p>  
  </div>
</div> 
<div data-role="page" id="page2">
  <div data-role="main" class="ui-content">
    <p style="border:1px solid black;margin:5px;">PAGE 2</p>  
  </div>
</div> 
<div data-role="page" id="page3">
  <div data-role="main" class="ui-content">
    <p style="border:1px solid black;margin:5px;">PAGE 3</p>  
  </div>
</div> 

</body>
</html>

Answer

$(document).on("pagecreate","#page1",function(){
    console.log("page1");
  $("#p1").on("swiperight",function(){
      console.log("page 1's p");
    //$('#page1').fadeOut();
    $('#page1').fadeOut();
    $('#page2').fadeIn();
    $('#page3').fadeOut();
  });                       
});

  $("#p2").on("swiperight",function(){
      console.log("page 2's p");
    $('#page1').fadeOut();
    $('#page2').fadeOut();
    $('#page3').fadeIn();
  });                       


  $("#p3").on("swiperight",function(){
      console.log("page 3's p");
    $('#page1').fadeOut;
    $('#page2').fadeOut;
    $('#page3').fadeIn;
  });

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="page1">
  <div data-role="main" class="ui-content">
    <p id="p1" style="border:1px solid black;margin:5px;">PAGE 1</p>  
  </div>
</div> 
<div data-role="page" id="page2">
  <div data-role="main" class="ui-content">
    <p id="p2" style="border:1px solid black;margin:5px;">PAGE 2</p>  
  </div>
</div> 
<div data-role="page" id="page3">
  <div data-role="main" class="ui-content">
    <p id="p3" style="border:1px solid black;margin:5px;">PAGE 3</p>  
  </div>
</div> 

</body>
</html>

see i have used console.log to slove error. you have used all document event that not going to invoke just use one and you have used all p event that also not work instead use id for every p. i hope you satisfied.

Swipe Event on HTML

Advertisement

Answer