0

I'm using following-like code on my website

    <span class="box">
        <noscript>
        <a href="link.php"><img src="images/imagebox.png"></a>
        </noscript>
    </span>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

    $(document).ready(function() {

        $('span.box').html('<img src="images/imagebox.png">');

        $(document).on('click','span.box', function(){

                   // rest of code

        });
    });

as you can see, i built it the way if the client has javascript, the content of is replaced by without link so it's more interactiv for the client and if the client has no javascript, he still has with the link the way he can still make the necessary action...

While this works perfectly without any trouble on the computer, on smartphone (at least mine), it doesn't work but i don't know why... actually, on my smartphone, i can't see the and can't do any action as if it wouldn't have javascript while it has... I have android 2.1 on my smartphone...

Do you know any solution or workaround for this, the way i can have this and necessary action ability even on smartphone?

Thanks in advance for your help!

EDIT: I finally opted for a solution like in JavaScript function in href vs. onclick

Community
  • 1
  • 1
Snipchain
  • 147
  • 2
  • 12

2 Answers2

1

All mobile devices don't handle click events.. should be:

$('<img />').attr('src', 'images/imagebox.png').appendTo('span.box').bind('click touchstart', function() {

   // handle click / touch

});

also see this post about double trgiggering issue in some touch enabled devices: How to bind 'touchstart' and 'click' events but not respond to both?

Community
  • 1
  • 1
Hardy
  • 5,590
  • 2
  • 18
  • 27
  • problem is not the click but inserting the image... I've tried touchstart but nothing as the problem is coming before the click event... – Snipchain Dec 07 '13 at 23:57
  • edited my comment.. and in your example you don't have ending slash in img tag.. so it's not valid xhtml. – Hardy Dec 08 '13 at 00:04
  • i m working with html5 so it's valid... it pass the W3C validator... but as said, image need to be inserted before click can be handled, in your example, you assume image is already visible while it's not, and that's the problem... :/ – Snipchain Dec 08 '13 at 00:13
  • 1
    edited the answer.. now it adds image and binds events to it. Use your brains to change that code if not STILL suitable for your needs. – Hardy Dec 08 '13 at 00:19
0

try to use

$(document).on('pageinit', function(){}); or $(document).on('mobileinit', function(){}); instead of

$(document).ready(function(){});

Vahe Shadunts
  • 1,956
  • 14
  • 18