Question

Background:

I’m developing an ecommerce site in jQuery Mobile (JQM). I’ve created a product page that lists all products in a particular category utilizing JQM’s Split Button Listview attribute.

Here is my working code:

<ul data-role="listview" data-inset="true" data-split-icon="plus" data-split-theme="d"         data-theme="d" data-dividertheme="d">
<li data-role="list-divider" class="listdivider">SPI_Level3Entry</li>
<!-- SPI_HTML_Product_Entry1 -->
<li class="prod"><a href="SPI_ProdFullLink" onmouseover="window.status=''; return     true;" rel="SPI_ProdThumbnail"><img src="SPI_ProdThumbnail" alt="SPI_ProdEntryDesc"/>
<!-- SPI_HTML_Product_LinkItemNum -->
<h2>SPI_ProdEntryID</h2>
<!-- SPI_HTML_Product_LinkItemNum -->
<!-- SPI_HTML_Product_Entry_Others -->
<p class="space"><b>
<!-- SPI_HTML_Product_ColHdr_PNs -->
SPI_ColHdrOther</b>
<!-- SPI_HTML_Product_ColHdr_PNs -->
: SPI_ProdEntryOther</p>
<!-- SPI_HTML_Product_Entry_Others -->
<p class="description"><b>Description</b>: SPI_ProdEntryDesc</p>
<!-- SPI_HTML_AllowOrderPlacement -->
<!-- SPI_HTML_AllowViewPriceAvail -->
<p class="space"><b>Qty Avail</b>: SPI_ProdQtyAvail</p>
<p class="space"><b>Unit Price</b>: <span class="price">SPI_ProdEntryPrice</span></p>
<!-- SPI_HTML_AllowViewPriceAvail -->

<input name="SPI_CartProductIDFieldName" type="hidden" value="SPI_ProductID" />
<input name="SPI_CartMfgProdIDFieldName" type="hidden" value="SPI_MfgProdID" />
<input name="SPI_CartProductDescFieldName" type="hidden" value="SPI_ProductDesc" />
<input type="number" name="SPI_CartOrdQtyFieldName" class="nolink" value="0" />

</a>
<a href="#" onClick="javascript:if (document.AddItem.SPI_CartOrdQtyFieldName.value==0)    {document.AddItem.SPI_CartOrdQtyFieldName.value='1'};document.AddItem.submit();">Add</a>
<!-- SPI_HTML_AllowOrderPlacement -->
</li>
</ul>

The Problem

As you can see, the contents of each li is wrapped in an “a href” attribute. Within the “a href” attribute, I have a text input. The problem is, when I click the text input to enter a value, the default “a href” behavior results.

The Question

How do I prevent the default “a href” behavior on the text input in JQM while retaining the default “a href” behavior on the rest of the li content?

Answer 1

You can prevent default behavior by calling preventDefault() on the event object.

example:

$('a').click(function(event){
    event.preventDefault();
    //also possible
    event.stopImmediatePropagation();
})