JQuerymobile on an iPad: vclick triggers a scroll to the top of the page, then executes the vclick

SUPER SHORT VERSION: Elements on a jQuerymobile-based html5 webapp don't respond directly to vclicks on an iPad. Instead, they silently scroll to the top of the page and trigger a vclick on whatever's under the same region of the screen.

LONG VERSION WITH PICTURES AND CODE: I'm using JQuerymobile and I'm having a problem with my page responding to some vclick events when I'm using my iPad. I've got a page with a bunch of elements that are bound to respond to vclick events. If everything fits onto my iPad's display without scrolling, everything works perfectly. If I need to scroll to see the element I want to click, I get the following behavior:

I tap my finger where the red circle is here:

The page flickers and the page responds as if I clicked the area in the little blue circle:

(blue circle image redacted for lack of hyperlinks to noobs (It's Q43ri.png on imgur)

I was confused as to what the heck was happening until I superimposed the screens:

So when I click one of my divs, it seems like it's paying attention to the coordinates I click on the display, but then scrolling to the top of the window and actually executing the click from that perspective. How do I fix this?

Here's the html for that section of the page:

 <div id="inventoryPageContainer" style="padding-right: 100px;">
     <div id="inventoryDisplayHeaders">
    <div class="inventoryPageName inventoryPageColumn header">Name</div>
    <div class="inventoryPageQuant inventoryPageColumn header">#</div>
    <div class="inventoryPageWt inventoryPageColumn header">Wt.</div>
</div>开发者_Go百科
</div>
<div id="inventoryTemplate" class="inventoryPageRow" style="display: none;">
    <div class="inventoryPageName inventoryPageColumn">Template Item Name</div>
    <div class="inventoryPageQuant inventoryPageColumn">#</div>
    <div class="inventoryPageWt inventoryPageColumn">X lb</div>
</div>
<div style="clear: both; border-bottom: 2px solid black;"></div>

All of the divs are clones of that inventoryTemplate item. If you need the CSS for that (I don't know man, I'm trying to give anyone reading this all the info I've got):

 #inventoryPage .inventoryPageName {
     width: 100%;
 }

 #inventoryPage .inventoryPageQuant {
     width: 50px;
     margin-right: -50px;
     vertical-align: middle;
 }

 #inventoryPage .inventoryPageWt {
     width: 50px;
     margin-right: -50px;
     right: -50px;
     vertical-align: middle;
 }

Here's the event binding code: templateCopy.find('.inventoryPageName').text(row.itemName).bind('vclick.inventoryPage', { row: row }, generateItemDescriptionDialog); templateCopy.find('.inventoryPageQuant').text(row.quantity).bind('vclick.inventoryPage', { row: row }, generateItemQuantityDialog);

generateItemDescriptionDialog and generateItemQuantityDialog both set some values on some dialog pages and then trigger the dialog pages to show with $.changePage("#thepages").

So uh.. why's this happen and how do I make it not happen?

(It's an RPG character sheet webapp if anyone's wondering why I'm cataloging weapons and guns.)

I think my problem was how I wrote my event handlers. I went through and added:

if (event.preventDefault)
     event.preventDefault();

to the beginning of each handler and made sure the handlers returned false. Admittedly, I don't know precisely what this did, so I'm cargo-culting a bit here, but it did solve the problem.