Bind jQuery Mobile swipe event to a DIV

Question

I ran into a small problem and I'm sure that somebody from the stackoverflow community might have the answer.

I'm trying to build a custom swipe event and bind it to a div with id="swipe". I use jQuery Mobile 1.1.1. I Googled around for a couple of hours this morning but unsuccessfully ...

My code

<script>
  $('#swipe').bind('swipe', function () {
     alert('Hello!');
  });
<script>    

<div id="swipe">Swipe here</div>

I've tried using .live() instead of .bind() but still no good. The weird thing is that if I use

<script>
  $(document).bind('swipe', function () {
     alert('Hello!');
  });
<script>  

... it's working perfectly but on the whole page of course instead of just the #swipe DIV.

Any ideas are highly appreciated.

Thanks!

Answer 1

Try it with the script tag after the div.

Answer 2

I guess $('#swipe') will not return the element since you are executing this code before the element is defined. move the script to the bottom or use the onload event.