按钮点击不适用于手机
button click not working on mobile
所以我有一个在底部有两个按钮的表单。
<div class="col-xs-12">
<div class="submit-button-mobile">Submit</div>
</div>
<div class="col-xs-12">
<a href="/how_to_book.php">
<div class="how-to-book-button-mobile">
How to book?
</div>
</a>
</div>
最初,我在submit-button-mobile
上有onclick="send_message();"
(适用于桌面,但不适用于移动设备。此外,标签在移动设备上也不可点击。
我在这里搜索过,找到了这个答案,使其在移动上工作
$('.submit-button-mobile').on('click touchstart', send_message);
$('.how-to-book-button-mobile').on('click touchstart', function() {
window.location.href = "/how_to_book.php";
});
仍然存在同样的问题,在移动设备上不可点击(在带有移动视图的chrome开发工具上尝试过,在iphone和android上尝试过)。
send_message()位于文件顶部的另一个.js文件中。看起来像这个
function send_message()
{
var a=document.forms["Form"]["name"].value;
var b=document.forms["Form"]["email"].value;
var c=document.forms["Form"]["message"].value;
var d=document.forms["Form"]["surname"].value;
document.getElementById("contact_message").innerHTML = "Sending your message... Please wait.";
loadXMLDoc(a, b, c, d);
}
//pomocna funkcija za validaciju emaila
function validateEmail(email) {
var re = /^(['w-]+(?:'.['w-]+)*)@((?:['w-]+'.)*'w['w-]{0,66})'.([a-z]{2,6}(?:'.[a-z]{2})?)$/i;
return re.test(email);
}
//funkcija za slanje emaila
function loadXMLDoc(name, mail, message, surname)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("contact_message").innerHTML=xmlhttp.responseText;
document.getElementById("contact_message2").innerHTML=xmlhttp.responseText;
}
}
// xmlhttp.open("GET","send_enquiry.php",true);
xmlhttp.open("POST","send_enquiry.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=" + name + "&email=" + mail + "&message=" + message + "&surname=" + surname);
xmlhttp.send();
}
可能您必须在定义send_message()
定义的同一文件中编写单击函数,并且单击定义应该在document.ready()
函数中。首先检查您是否在点击div.时收到警报
$(document).ready(function() {
$('.how-to-book-button-mobile').on('click touchstart', function(e) {
e.preventDefault();
alert("how-to-book-button-mobile");
});
$('.submit-button-mobile').on('click touchstart', function(e) {
e.preventDefault();
alert("submit");
});
});
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<div class="col-xs-12">
<div class="submit-button-mobile">Submit</div>
</div>
<div class="col-xs-12">
<a href="#">
<div class="how-to-book-button-mobile">
How to book?
</div>
</a>
</div>
这个答案也可能对你有所帮助。
相关文章:
- AddEventListener适用于浏览器,但不适用于Android
- 查找仅适用于原始图像的图像放大算法的名称
- 如何在category.php中执行jquery,这应该适用于类别wordpress中的每个帖子
- Web编程,简单但适用于机器人项目
- JavaScript不适用于internet explorer和Firefox,但适用于谷歌
- Jquery事件处理程序仅适用于匿名函数
- jQuery调整大小函数只适用于窗口
- 火灾在卸载前确认警报仅适用于外部站点
- EmberJS-适用于各种模型的适配器动态名称空间
- Facebook共享链接适用于用户,但不适用于粉丝页面管理员
- jQuery-适用于移动设备的多级菜单
- 循环中的切换脚本只适用于第一次迭代
- 为什么setTimeout适用于无休止的递归调用
- 我未保存的更改指令需要适用于具有不同名称的所有表单
- 适用于多种浏览器的Selenium-需要能够执行javascript的webDriver
- 适用于可在网络浏览器和智能手机上运行的网站的 MP3 播放器
- 响应式设计适用于桌面浏览器、移动模拟器(Safari和Mozilla Firefox),但不适用于真正的智能手机(And
- Angularjs Ionic - 适用于手机和平板电脑的不同布局
- 适用于网络和手机的FB.ui
- Phonegap Android项目适用于模拟器,而不是实际的手机