This is a migrated thread and some comments may be shown as answers.

JQuery $(document).ready Issue

1 Answer 437 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 31 Jan 2013, 03:04 PM
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.

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 04 Feb 2013, 12:20 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
General Discussions
Asked by
Jon
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or