CODEWITHSUNDEEP
javascriptandroidjqueryandroid-4.0-ice-cream-sandwich
Joel Arnold
Joel Arnold

Reputation: 1231

JavaScript click events not working on Samsung Galaxy SIII on Android 4.0.4 default browser

I have the strangest issue with the default browser of the Samsung Galaxy SIII on Android 4.0.4:

With the following page, clicking on the links will not trigger the JavaScript handlers. Removing a single 'a' letter from the content one of the divs makes them work again...

Here is a screenshot of the JS console:

enter image description here

I opened an android bug report, if you have the same issue please star it, thanks.

Thank you in advance for your help!

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        alert('attaching click handlers');
        $("#red").click(function(e) {
            alert('red clicked');
            $("body").css("background-color", "#CC0000");
        });
        $("#green").click(function(e) {
            alert('green clicked');
            $("body").css("background-color", "#00CC00");
        });
        $("#blue").click(function(e) {
            alert('blue clicked');
            $("body").css("background-color", "#0000CC");
        });
    });
</script>
</head>
<body>
    <div>
        <p>
            <a id="red" href="#">CHANGE TO RED</a>
        </p>
        <p>
            <a id="green" href="#">CHANGE TO GREEN</a>
        </p>
        <p>
            <a id="blue" href="#">CHANGE TO BLUE</a>
        </p>
    </div>
    <p>Removing one of the a's in the content below will make the JS
        click events work (i.e. trigger background color change), and
        so will changing the 'page' class or id into something else</p>
    <div class="page" id="page">
        <div>aaaaaaaaaaaaaaaaaaa</div>
        <ul>
            <li>
                <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
            </li>
        </ul>
    </div>
</body>
</html>

Upvotes: 4

Views: 9587

Answers (3)

czuendorf
czuendorf

Reputation: 863

Something like this will work, too:

<a href='http://www.google.de' ontouchstart='window.location = this.href'>foo</a>"

Upvotes: 0

Jeff
Jeff

Reputation: 11

I just had a similar problem on a Samsung Galaxy. Found this thread. Changing from: 

span id="page"

to: 

span id="pgNow"

fixed it!

Upvotes: 1

Joel Arnold
Joel Arnold

Reputation: 1231

Actually there is at least an easy solution: change the id of the DIV to not contain the 'page' substring...

It is more a workaround than a solution but what else can be done if the browser has a buggy customization?

Upvotes: 2

Related Questions