简体   繁体   中英

jQuery on Button Click in mobile devices

I have a Button

 d3.select("#updatebutton").on("click", function(e) {
       try{
            $.get('any url', function(data) {
                    alert('Any Alert Message');
                window.location.href = window.location.href;
            });
        }
        catch (e) {
            alert('Error: ' + e);
        }
    }

where i want to do certain actions on the button click event:

 app.get('any url', function(req, res, next) {
try{
    anyfunction();
}
catch(e) {
    alert('Error');
}
});

It is working fine on normal web browser, however if I open my webpage on a mobile device, it seems that the click event is never called and nothing happens. Is this a jQuery Problem or am I missing something?

The Code is running on a node.js Server.

Hope anyone can help.

UPDATE:

I'm using jade as rendering-engine for HTML. My Button looks like the following:

    div#updatebutton
    i.fa.fa-repeat.fa-lg
    |   'some description'

Try with touchstart event.

UPDATE

Please check.

var myButton = d3.select("#updatebutton");
myButton.on("touchstart", onDown);

function onDown() {
    alert("Work");
    try{
        $.get('any url', function(data) {
            alert('Any Alert Message');
            window.location.href = window.location.href;
        });
    }
    catch (e) {
        alert('Error: ' + e);
    }
}

You can detect user device using navigator object. Refer this

If device is touch enabled then use touchstart / touchend events or use click events for desktops ( click events should work in mobile browsers too, can not guess the reason by going through the provided code)

Try this:

function is_touch_device() {
  return (('ontouchstart' in window) || (navigator.MaxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0));
}
var myButton = d3.select("#updatebutton");
var myEvent = is_touch_device() ? 'touchend' : 'click';
myButton.on(myEvent, onDown);

function onDown() {
  $.get('any url', function(data) {
    alert('Any Alert Message');
    window.location.reload(); //better way to reload the page
  }).fail(function(error) {
    console.log(error);
  });
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM