CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobilemobile
OneNation
OneNation

Reputation: 417

Href Javascript works on desktop but not on Mobile

I am using to do this function to rotate html contents. It is working on laptop/mac but not working when I 'touch' the links on mobile phone.

<a href="javascript:void(0)" >Link 1</a>
<a href="javascript:void(0)" >Link 2</a>
<a href="javascript:void(0)" >Link 3</a>
<a href="javascript:void(0)" >Link 4</a>
<a href="javascript:void(0)" >Link 5</a>

Upon clicking, the html contents will be dynamically changed.

I tried

<a href="#" onclick="javascript:;" >Link 1</a>

Also tried

<a href="javascript:;">Link 1</a>

Both didnt work on mobile. Any idea why is this so? Do I need to add any codes in the javascript?

Edit:

The triggering code is this. Firstly it is using a class. Below is one of the methods.

bindMoveHandler:function(target){
        var _this = this;
        target.on(_this.options.trigger,'a',function(event){
            var w = $(this).width();
            var current_offset = $(this).offset();
            var control_offset = target.offset();
            var left = current_offset.left - control_offset.left;
            var scale = w/100;
            var d = 0; //index after move finished

Full code: http://www.jqueryscript.net/demo/jQuery-Plugin-For-Stylish-Tabbed-Slider-Kiwi-Slider/javascripts/kiwi-slider.js How do I modify this to suit the suggested solutions?

Upvotes: 0

Views: 2885

Answers (2)

ZZZZtop
ZZZZtop

Reputation: 457

Use jQuery instead of the onclick attribute and use a function call something like this:

html:

<a href="#" id="onceClicked">Home</a>

jQuery (Tested):

$('#onceClicked').click(function(e) {
    $(this).text('You clicked me!');
});

An example page would be like this:

<!DOCTYPE html>
<html>
    <head>
        <title>Change Text</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    </head>
    <body>
        <a href="#" class="onceClicked">Link 1</a>
        <a href="#" class="onceClicked">Link 2</a>
        <a href="#" class="onceClicked">Link 3</a>
        <a href="#" class="onceClicked">Link 4</a>
        <a href="#" class="onceClicked">Link 5</a>

        <script>
            $('.onceClicked').click(function(e) {
                $(this).text('You clicked me!');
            });
        </script>
    </body>
</html>

Here is a working example:

http://jsfiddle.net/q87dLoc1/

Although if you wish to add html and not just text you would change this:

$(this).text('You clicked me!');

to something like this: 

$(this).html('<b>You clicked me!</b>');

Upvotes: 1

Frank Conijn - Support Ukraine
Frank Conijn - Support Ukraine

Reputation: 3190

Have you tried this: 

<a href="#" onclick="yourFunction(); return false">Link 1</a>

Do keep in my mind that this method may bite a possible return value of yourFunction().

Upvotes: 0

Related Questions