我正在使用jquery touchswipe,但是由于我是通过javascript而不是通过html本身创建dom元素,因此如果我不使用$(document).on('click', '.swipe-area')
而不是$('.swipe-area').on('click')
,它将不起作用。所以我的代码:
$('.swipe-area').on('click', function() {
alert('This Doesnt Work!');
});
$(document).on('click', '.swipe-area', function() {
alert('This Works!');
});
但是,当我想使用$('.swipe-area').swipe({//Some Functions Here...})
时,我不知道如何使用上述第二种方法选择.swipe-area
。
更新
这是我完整的代码:
<script>
$('.swipe-area').swipe({
swipeStatus: function(event, phase, direction, distance, duration, fingers)
{
if (phase=='move' && direction =='left') {
$('#sidebar').addClass('open-sidebar');
$('.swipe-area').css('background-color', 'transparent');
$('.sidemenu-overlay').show();
return false;
}
if (phase=='move' && direction =='right') {
$('#sidebar').removeClass('open-sidebar');
$('.swipe-area').css('background-color', 'rgba(22, 184, 186, 0.5)');
$('.sidemenu-overlay').hide();
return false;
}
}
});
</script>
<div class="sidemenu-overlay"></div>
<div class="sidemenu">
<div id="sidebar">
<ul>
<li>...</li>
</ul>
</div>
<div class="swipe-area"></div>
</div>
<style>
.sidemenu-overlay {
display: none;
background-color: rgba(0, 0, 0, 0.3);
height: 100%;
width: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1031;
}
.sidemenu {
position: relative;
width: auto;
height: auto;
top: -68px;
right: 0;
float: right;
z-index: 1031;
}
.swipe-area {
position: fixed;
width: 10px;
height: 100vh;
right: 0;
top: 0;
background-color: rgba(22, 184, 186, 0.5);
z-index: 0;
}
#sidebar {
background-color: #16b8ba;
position: fixed;
width: 240px;
height: 100vh;
right: -240px;
-webkit-box-shadow: -2px 3px 5px 3px rgba(0, 0, 0, 0.3);
box-shadow: -2px 3px 5px 3px rgba(0, 0, 0, 0.3);
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-transition: right 0.4s ease-in-out;
transition: right 0.4s ease-in-out;
overflow-y: auto;
}
#sidebar.open-sidebar {
right: 0;
}
#sidebar ul li:hover {
background-color: #187a8a;
-webkit-transition: background-color 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
#sidebar ul li a {
padding: 15px 10px;
color: #fff;
display: block;
border-bottom: 1px solid #fff;
}
</style>
顺便说一句,下面的代码可以正常工作:
$('.p-paragraph-top-of-the-page').swipe({
swipeStatus: function(event, phase, direction, distance, duration, fingers)
{
console.log(direction);
}
});
谢谢
答案 0 :(得分:0)
只需尝试一下:
$(document).on('swipe', '.swipe-area', function() {
alert('This Works!');
});
我想您的问题是由于return false
引起的。取消默认行为所需的唯一操作是preventDefault()。发行返回false;可以创建易碎的代码。通常,您只需要这样:
$("a").on( 'click', function (e) {
// e == our event data
e.preventDefault();
});