JQuery $(document).ready Issue

[Jon]

Hello,

I am currently using "kendo.mobile.min.js" for a client's mobile website.

On one of template pages for the page detail, I have included some JQuery code to show and hide a <div> when an image is clicked.

<script>

    $(document).ready(function(){

 

        var imgHelp = $('#imgHelp');

        var helpContent = $('#helpContent');

 

        imgHelp.click(function(event) {

 

            console.log('Image was clicked.');

 

            if (helpContent.is(":hidden")) {

                helpContent.show();

            }

            else {

                helpContent.hide();

            }

        });

    });

</script>

When the image is clicked, the code within the imgHelp.click is run twice.  The console log fires the message twice and the div never appears because it shows the div and then the code runs again, and hides it.  The only JavaScript file that I have on the page is the one reference above.  What I found interesting, is when I removed the "kendo.mobile.min.js" from the page, when I clicked on the image, the JQuery ran ONCE.

Can someone explain why this is happening and what I can do to fix this issue.


EDIT:  I found that when NOT using the document.ready, it works just fine!

<script>

function KendoUI() {

    alert('Test');

}

</script>

 

<img src="/design/images/info.png" onclick="KendoUI();">

Thank you in advance for your help.

[Alexander Valchev]

Hello Jon,

As you correctly noticed, using the jQuery document.ready event in mobile applications is not recommended and error prone. Instead please consider using the build-in View events.

In addition, using the build-in jQuery click event may cause troubles when the application is opened on touch device. My recommendation is to use a button widget and its build-in click event. 

Kind regards,
Alexander Valchev
the Telerik team