jquery - Why does my close button not work on touchscreens? -

i got close button shows when image clicked, image resized , after clicking close button resized origin size. works fine on pcs not on mobile devices. here code:

$(document).ready(function () {    $('.image').click(function (event) {        /* code hiding elements , enlarging image here */        $('#close_button2').show();    });    $('#close_button2').on('touchend click', function(event){        /* code showing elements , display image in smaller size again */        $('#close_button2').hide();    });    $(document).keyup(function (e) {             if (e.keycode == 27) {                 /* code pressing escape button */             }    }); }); 

instead of $('#close_button2').on('touchend click', function(event){ tried:

$('#close_button2').click(function (event) { $('#close_button2').on( "vclick", function( event ) { //jquery mobile - there conflicts code $('#close_button2').on(ismobile ? 'touchend' : 'click', function(event) { $(document).on('click', '#close_button2', function(event) { 

but nothing worked. ideas?

on not appear multiple events (surprised me too!).

use bind instead:

jsfiddle: http://jsfiddle.net/trueblueaussie/twdzy/

$(document).ready(function () {    $('.image').click(function (event) {        /* code hiding elements , enlarging image here */        $('#close_button2').show();    });    $('#close_button2').bind('touchend click', function(event){        /* code showing elements , display image in smaller size again */        $('#close_button2').hide();    });    $(document).keyup(function (e) {             if (e.keycode == 27) {                 /* code pressing escape button */             }    }); });