Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Appending a link in JavaScript for mobile browsers

Appending a link in JavaScript for mobile browsers

Problem

I tried searching for my problem, but couldn't find a solution. Sorry if this is already posted.

I have a dynamically created href link using append, but it does not work on Mobile Safari and mobile Chrome (other than ipad). The link works fine on all desktop browsers I have tested or if I choose "Request desktop site" on a mobile device. This is what I am doing:

I am using append to create some elements and one of them contains my link. The information is simply taken from a json array.

HTML:

    Javascript:

    function createStructure(i){
    
        $(structure).append($('
      \
    • \
    • \
    • \

      Link to map: Click Here.

      \
    ')); }

    The link is to google maps, but it does not work on mobile version of Safari and Chrome (on mobile devices). I also tried to add an .on() to make sure the click event would be detected:

    $(document).on('click', '.gmaplink', function(){
        console.log("link working: " + this.href);
        window.open(this.href, '_blank');
    });
    

    But this code also fails, even though I see that it gets executed with my log (works everywhere other than mobile browsers). However, if I remove the append and simply have the html structure, the links are working on mobile... So this tells me the issue might be with the append.

    My question is: what is the proper way to include a link (href) when using append and on mobile browsers.

    Thank you!

    Problem courtesy of: Maxime Marchand

    Solution

    Try the following code, because you had some weird escape characters when not needed, and you didn't encode the q parameter in your URL, and you didn't use the right selector #structure :

    function createStructure(i){
    
        $('#structure').append($('
      ' + '
    • ' + '
    • ' + '
    • ' + '

      Link to map: Click Here.

      ' + '
    • '+ '
    ')); }

    Edit : Didn't see the question was asked a year ago... =_=

    Solution courtesy of: Oliboy50

    Discussion

    View additional discussion.



    This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

    Share the post

    Appending a link in JavaScript for mobile browsers

    ×

    Subscribe to Css3 Recipes - The Solution To All Your Style Problems

    Get updates delivered right to your inbox!

    Thank you for your subscription

    ×