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 ?
JavaScript
x
52
52
1
<!DOCTYPE html>2
<html>3
<head>4
<meta name="viewport" content="width=device-width, initial-scale=1">5
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">6
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>7
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>8
<script>9
$(document).on("pagecreate","#page1",function(){10
$("p").on("swiperight",function(){11
$('#page1').fadeOut();12
$('#page2').fadeIn();13
$('#page3').fadeOut();14
}); 15
});16
$(document).on("pagecreate","#page2",function(){17
$("p").on("swiperight",function(){18
$('#page1').fadeOut();19
$('#page2').fadeOut();20
$('#page3').fadeIn();21
}); 22
});23
$(document).on("pagecreate","#page3",function(){24
$("p").on("swiperight",function(){25
$('#page1').fadeOut();26
$('#page2').fadeOut();27
$('#page3').fadeIn();28
}); 29
});30
</script>31
</head>32
<body>33
34
<div data-role="page" id="page1">35
<div data-role="main" class="ui-content">36
<p style="border:1px solid black;margin:5px;">PAGE 1</p> 37
</div>38
</div> 39
<div data-role="page" id="page2">40
<div data-role="main" class="ui-content">41
<p style="border:1px solid black;margin:5px;">PAGE 2</p> 42
</div>43
</div> 44
<div data-role="page" id="page3">45
<div data-role="main" class="ui-content">46
<p style="border:1px solid black;margin:5px;">PAGE 3</p> 47
</div>48
</div> 49
50
</body>51
</html>52
Advertisement
Answer
JavaScript
1
26
26
1
$(document).on("pagecreate","#page1",function(){2
console.log("page1");3
$("#p1").on("swiperight",function(){4
console.log("page 1's p");5
//$('#page1').fadeOut();6
$('#page1').fadeOut();7
$('#page2').fadeIn();8
$('#page3').fadeOut();9
}); 10
});11
12
$("#p2").on("swiperight",function(){13
console.log("page 2's p");14
$('#page1').fadeOut();15
$('#page2').fadeOut();16
$('#page3').fadeIn();17
}); 18
19
20
$("#p3").on("swiperight",function(){21
console.log("page 3's p");22
$('#page1').fadeOut;23
$('#page2').fadeOut;24
$('#page3').fadeIn;25
}); 26
JavaScript
1
28
28
1
<!DOCTYPE html>2
<html>3
<head>4
<meta name="viewport" content="width=device-width, initial-scale=1">5
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">6
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>7
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>8
</head>9
<body>10
11
<div data-role="page" id="page1">12
<div data-role="main" class="ui-content">13
<p id="p1" style="border:1px solid black;margin:5px;">PAGE 1</p> 14
</div>15
</div> 16
<div data-role="page" id="page2">17
<div data-role="main" class="ui-content">18
<p id="p2" style="border:1px solid black;margin:5px;">PAGE 2</p> 19
</div>20
</div> 21
<div data-role="page" id="page3">22
<div data-role="main" class="ui-content">23
<p id="p3" style="border:1px solid black;margin:5px;">PAGE 3</p> 24
</div>25
</div> 26
27
</body>28
</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.