javascript - jQuery .tap event not working - Stack Overflow

I can't figure out why the jQuery tap event isn't even getting a respond when I test it. I put in an alert and I haven't gotten it to pop up at all. My code looks like this:

var calendarOpen = false;

$('.calendar').on("tap", function () {
alert('1'); 
    if (calendarOpen == false) {
        $('.login-body').animate({left: '90%'}, 300);
        $('.calendar-body').animate({right: '10%'}, 300);
        calendarOpen = true;
    } else {
        $('.login-body').animate({left: '0px'}, 300);
        $('.calendar-body').animate({right: '50%'}, 300);
        calendarOpen = false;
    }
});

I have the script and css pages attached and I've checked for any typos. I copied the jQuery documentation and I'm still having problems. Thanks for the help.

These are my included scripts and the code provided above is under main.js.

<script src=.3.2/jquery.mobile-1.3.2.min.js></script>
<script src=.10.3/jquery-ui.js></script>
<script src=".0.3.min.js"></script>
<script src="scripts/main.js"></script>

I can't figure out why the jQuery tap event isn't even getting a respond when I test it. I put in an alert and I haven't gotten it to pop up at all. My code looks like this:

var calendarOpen = false;

$('.calendar').on("tap", function () {
alert('1'); 
    if (calendarOpen == false) {
        $('.login-body').animate({left: '90%'}, 300);
        $('.calendar-body').animate({right: '10%'}, 300);
        calendarOpen = true;
    } else {
        $('.login-body').animate({left: '0px'}, 300);
        $('.calendar-body').animate({right: '50%'}, 300);
        calendarOpen = false;
    }
});

I have the script and css pages attached and I've checked for any typos. I copied the jQuery documentation and I'm still having problems. Thanks for the help.

These are my included scripts and the code provided above is under main.js.

<script src=http://code.jquery./mobile/1.3.2/jquery.mobile-1.3.2.min.js></script>
<script src=http://code.jquery./ui/1.10.3/jquery-ui.js></script>
<script src="http://code.jquery./jquery-2.0.3.min.js"></script>
<script src="scripts/main.js"></script>

• javascript
• jquery

Share Improve this question Follow edited Aug 9, 2013 at 0:47 Thomas Devin asked Aug 8, 2013 at 23:51 Thomas DevinThomas Devin 8711 silver badge88 bronze badges 6

• You declare the library of Jquery or this script stay inside <script type="text/javascript"> $(document).ready(function() { ??? – Mirko Cianfarani Commented Aug 8, 2013 at 23:52
• Are you referring to the jQuery Mobile tap event (and including the library)? api.jquerymobile./tap – Ian Commented Aug 8, 2013 at 23:53
• It's either the native touch events, or you'll need to add something more than jQuery, like jQ mobile. – adeneo Commented Aug 8, 2013 at 23:54
• 1 Sorry, I should have been more specific. I did include both jquery and jquery-mobile. – Thomas Devin Commented Aug 9, 2013 at 0:16
• @user2666291 What version of jQuery are you using? Have you watched your browser's console to check for any unexpected exceptions? Where is the code you provided being executed? Is the .calendar elements rendered/ready? A simple example works for me: jsfiddle/qkhZz – Ian Commented Aug 9, 2013 at 0:27

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 5

You need to load your JS files in this order:

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

reference: http://jquerymobile./demos/1.0/docs/api/globalconfig.html