0

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?

OneNation
  • 427
  • 1
  • 8
  • 22

2 Answers2

1

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>');
ZZZZtop
  • 457
  • 1
  • 5
  • 19
  • I want to try that but i m nt sure how to edit my current code to suit that. I've editted my post above – OneNation Jul 10 '15 at 03:06
  • @OneNation I have updated my post, please take a look. – ZZZZtop Jul 10 '15 at 03:12
  • 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('You clicked me!');` – ZZZZtop Jul 10 '15 at 03:20
  • hii thanks. i am aware of that. but currently, im using some sort of prototype method javascript. I am not sure how to trigger the event. please look at my first post i've editted – OneNation Jul 10 '15 at 03:36
0

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

Frank Conijn - Support Ukraine
  • 3,050
  • 1
  • 22
  • 29
  • I would try that but i m nt sure how to edit my current code to suit that. I've editted my post above – OneNation Jul 10 '15 at 03:05
  • I rarely use jQuery because almost everything I do with Javascript I can do with the native/vanilla script. And your script is a complicated one for me. So I can't help you any further, I'm afraid. – Frank Conijn - Support Ukraine Jul 10 '15 at 04:02