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?

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?

• javascript
• jquery

• I'm not saying this is the problem, but why are your jab, etc., variables global? – nnnnnn Commented Apr 5, 2017 at 2:31
• what if you switch your commas to semicolons on lines 5-6? – kman Commented Apr 5, 2017 at 2:35
• On tap or on touchstart ?? Hey think mobile events! No mouse on a cell phone. – Louys Patrice Bessette Commented Apr 5, 2017 at 2:37
• @kman already tried that but still the same. – Amran Commented Apr 5, 2017 at 2:42
• 1 are you sure the FormData API is supported on the mobile browser you're using? since you can't get to console, could you try alert()'ing the values or something just to see if you're actually getting valid data back from the data.get() calls? Compatibility reference. Looks pretty limited on mobile. – kman Commented Apr 5, 2017 at 4:15

4 Answers 4

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(){

button has tons of built in so it handles mobile touches correctly; thus, html change is needed.

<button class="className" type="button"></button>

and in jQuery regular click will do

$('.className').click(function(e) { // no touchstart needed
    e.preventDefault();
    // do stuff
});

without button click, tap, touchstart rely on browser developer so might not work...

try this:

$('#submit_upload').on('click', function(){...});