I have a form that user can upload a file to the database. Unable to make .on("click") event on mobile device. It works fine on pc/laptop and the file is uploaded successful. On mobile, if I click the button, there is no response.
Codes
$(document).on("click", "#submit_upload", function(){
var data = new FormData(document.querySelector("#fileInfo"));
// If I comment below variables,
// it works fine on both mobile and computers.
jab = data.get('jab'),
kat_doc = data.get('jenis_fail'),
doc_nama = data.get('nama');
doc = data.get('file').size;
$.ajax({
url: url,
type: "POST",
data: data,
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#cont").html(data);
if (!doc_nama) {
$("#nama-doc").addClass("list-group-item list-group-item-warning");
}
if (jab == 0) {
$("#jab").addClass("list-group-item list-group-item-warning");
}
if (kat_doc == 0) {
$("#kat-doc").addClass("list-group-item list-group-item-warning");
}
if (!doc) {
$("#doc").addClass("list-group-item list-group-item-warning");
}
$('#myModal').modal({backdrop: "static"});
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus();
});
}
});
});
Note: If I comment the variables jab/kat_doc/doc_nama/doc, it trigger the click event.
How do I want it to work with the variables?
Think mobile a second...
There is no mouse on a cell phone or tablet.
click is definitely a mouse event.
Try adding those events to you handler:
(Touch event reference)
$(document).on("click tap touchstart", "#submit_upload", function(){
This should do the trick.
change the first line of your function to below, and it should work:
$(document).on('click touchstart', '#submit_upload', function(){
Or give a try to this,
$(document).on('click touchstart tap', '#submit_upload', function(){
try this:
$('#submit_upload').on('click', function(){...});