Android Webview Javascript click event not fireing as it should

Question

Ive got a webpage with alot of diffrent setups of the DOM where click events are binded.

But at some cases, the click events doesnt triggers. ive written all my events the same way: $('#Element').click(function(){...});

I have narrow it down to just alert something when i click on those elements that doesnt work. but nothing happens.

This only happens in Android mobile: Samsung Galaxy note 4.1.2 Samsung Galaxy s3 Mini 4.1.2 When i run in webview, if i run it in Chrome mobile browser it works perfectly.

In generall the click events is put on 'a' tags, with labels and input type hidden inside.

Is there some unknown rules for not using a tags or labels inside it or something that cracks this up for android browser? Or is there some other solution for this kind of bug?

PS. When i click the element multiple times (5-6 times) after eachother, it fires away...

Answer 1

Have you enabled javascript for your WebView?

webView.getSettings().setJavaScriptEnabled(true);

Answer 2

First of all, you shouldn't use .click() as it is deprecated. Instead, use

$('#id').on('click', function(event) { 
    //whatever 
});

Are the elements inserted dynamically with javascript? If so, you will need to use event delegation, as yshrsmz suggests. Also, in your example, you write #element, this targets an element with an id of element, you should only use an id once in the dom. Instead, apply a class to all elements that should trigger the click.

Ensure that all the bindings are being set on document ready.

It's probably worth running your HTML through the W3C validator, to make sure its all valid. This could cause errors if not.

Finally, check your Android logcat, see if there are any errors being reported when you click the elements.