CODEWITHSUNDEEP
javascriptandroidjquerywebviewandroid-webview
SpaceX
SpaceX

Reputation: 2890

How to enable jQuery click events in Android WebView

I have seen many similar questions which did not help me, hence this question.

I have a website that uses jQuery. I am building an android app with webview, that opens the website. While the webview opens the website, the problem I have is the webview doesn't recognize any click events of the website. Here is the code for setting up the webview.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    myWebView = (WebView) findViewById(R.id.webview);
    WebSettings webSettings = myWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    myWebView.setClickable(true);
    myWebView.setWebChromeClient(new WebChromeClient());

    String localWebsite = "http://10.0.2.2:5000/test.html";
    myWebView.loadUrl(localWebsite);

}

The below is the code on my test website:

How can I enable click events?

This part $('.symptomImage').on('click ', function () { $('#symptomsDiv').css("display","none"); }); doesn't work !! 

<script>

function test() { 
   $(document.body).prepend('Hello World'); // This Works
   $('#status').text("DidNotClick!!")       // This Works

  $('.symptomImage').on('click ', function () { // This doesn't work
      $('#symptomsDiv').css("display","none");
  });
}

test();

</script>

HTML code of the website

<div id="symptomsDiv" class="text-center">
            <div class="symptomImage" style="display: inline-block !important">
                 <img src="images/symptoms/cold.png" class="img-rounded symptomImg center-block" alt="...">
            </div>
            <div class="symptomImage" style="display: inline-block !important">
                <img src="images/symptoms/cough.png" class="img-rounded symptomImg center-block" alt="...">
            </div>
            <div class="symptomImage" style="display: inline-block !important">
                <img src="images/symptoms/fever.png" class="img-rounded symptomImg center-block" alt="...">
            </div>
</div>

Upvotes: 1

Views: 1781

Answers (1)

Avinash Kumar Singh
Avinash Kumar Singh

Reputation: 763

Replace your web view initialization in android with this code and try.

Its working for me

        webView = (WebView) findViewById(R.id.webview);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setWebViewClient(new WebViewClient());
        String localWebsite = "http://10.0.2.2:5000/test.html";
        webView.loadUrl(url);
        webView.requestFocus();

Otherwise check your webpage code that its implemented properly.

For other webpage url my above code is working fine

Upvotes: 1

Related Questions