click the buttons on the panel results in clicking the widgets behind it as well?
I have a page defined like below. The behaviour is that when I click the "Tools" button, it will open the "#toolPanel" panel. There are two buttons on the panel. When I click on the first button with a "tap" event, the widgets behind it is also tapped (The widget behind that button is the "search" <input>.
Can any of you experienced users tell me what I should do? I am relatively new to jquerymobile. Thanks.
<div data-role="page" id="mainMapPage">
<div data-role="header" data-add-back-btn="true" id="mapHeader" data-position="fixed" data-tap-toggle="false">
<h1>xxxxxxxx.</h1>
<a href="#toolPanel" data-rel="open" data-icon="gear" class="ui-btn-right">Tools</a>
<input type="search" name="geoSearch" id="geoSearch" value="" placeholder="Search here..." data-mini="true" data-theme="b"/>
</div>
<div data-role="content" id="map-canvas">
</div>
<div data-role="footer" data-position="fixed" id="mapFooter" data-tap-toggle="false" data-tap-toggle="false">
<li><a href="" data-icon="info">xxx</a></li>
<li><a href="" data-icon="bars">xxx</a></li>
<li><a href="" id="nextPost" data-icon="arrow-r">xxx</a></li>
</ul>
</div>
</div>
<div data-role="panel" id="toolPanel" class="xxx-tool-panel" data-position="right" data-display="overlay" data-theme="a">
<a href="#" id="placeItem" data-icon="xxx-pin" data-inline="false" data-role="button" data-iconpos="top">Place</a>
<a href="#toolPanel" rel="close" id="closePanel" data-icon="delete" data-inline="false" data-role="button" data-iconpos="top">Close</a>
</div>
</div>