2013-06-13 55 views
0

我有一個圖像滑動條,它不適用於平板電腦,因爲我在任何地方都使用onclick。但是,當我寫:Onclick不能在平板電腦上工作

$('#myImageFlow').on("touchstart",".sliderImage", function(event){ 
    alert('i am on method '+event.type); 
}); 

這行是我的滑蓋然後警報打印和滑塊的作品,如果我嘗試更換警報:

console.log('on method ......'+event.type); 

然後,它不能正常工作。會有什麼問題?

HTML:

<body style="background-image:url('img/Mesh2.png');background-repeat:no-repeat; background-size: cover; width=:'100%'"> 
    <h1>iSlider</h1> 




    <!-- This is all the XHTML ImageFlow needs --> 
    <div id="myImageFlow" class="imageflow"> 

    <div id="id1" alt='div1'class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img1.jpg'); border:solid; border-color: black;">You've styled the div to have a set width of 100px. At a reasonable font size, that's too much text to fit in 100px. Without doing anything, the default white-space value is normal, 
    and the text will wrap. See the example below or follow along at home with the demo.You've styled the div to have a set width of 100px. At a reasonable font size, that's too much text to fit in 100px. Without doing anything, the default white-space value is normal, 
    and the text will wrap. See the example below or follow along at home with the demo.</div> 
    <div id="id2" alt='div2' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img2.jpg'); border:solid; border-color: black;">this is 2</div> 
    <div id="id3" alt='div3' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img3.jpg'); border:solid; border-color: black;">this is 3</div> 
    <div id="id4" alt='div4' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img4.jpg'); border:solid; border-color: black;">this is 4</div> 
    <div id="id5" alt='div5' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden; background-image:url('img/img5.jpg'); border:solid; border-color: black;">this is 5</div> 
    <div id="id6" alt='div6' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img6.jpg'); border:solid; border-color: black;"> this is 6</div> 
    <div id="id7" alt='div7' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img7.jpg'); border:solid; border-color: black;"> this is 7</div> 
    <div id="id8" alt='div8' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img8.jpg'); border:solid; border-color: black;">this is 8</div> 
    <div id="id9" alt='div9' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img9.jpg'); border:solid; border-color: black;"> this is 9</div> 
    <div id="id10" alt='div10' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img10.jpg'); border:solid; border-color: black;">this is 10</div> 
    <div id="id11" alt='div11' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img11.jpg'); border:solid; border-color: black;">this is 11</div> 
    <div id="id12" alt='div12' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img12.jpg'); border:solid; border-color: black;">this is 12</div> 
    <div id="id13" alt='div13' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img13.jpg');border:solid; border-color: black;">this is 13</div> 
    <div id="id14" alt='div14' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img12.jpg'); border:solid; border-color: black;">this is 14</div> 
    <div id="id15" alt='div15' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img6.jpg'); border:solid; border-color: black;"> this is 15</div> 
    <div id="id16" alt='div16' class="sliderImage" width="300" height="360" onclick="" style="visibility:hidden;background-image:url('img/img7.jpg'); border:solid; border-color: black;"> this is 16</div> 



    </div> 




</body> 

回答

0

使用vclick

$(document).on('vclick', '#myImageFlow', function() { 
    // your scripts 
}); 
+0

什麼是V單擊? – PSR

+0

http://api.jquerymobile.com/vclick/ – yeyene

+0

什麼是你的jQuery版本? – yeyene

相關問題