Open actionsheet immediately fires data-action

Question

I have an actionsheet similar to the code below:

<ul data-role="actionsheet" id="marketplace-actions" >
    <li><a href="#" data-action="getCategoriesByPrice(5)">$$$$$</a></li>
    <li><a href="#" data-action="getCategoriesByPrice(4)">$$$$</a></li>
    <li><a href="#" data-action="getCategoriesByPrice(3)">$$$</a></li>
    <li><a href="#" data-action="getCategoriesByPrice(2)">$$</a></li>
    <li><a href="#" data-action="getCategoriesByPrice(1)">$</a></li>
</ul>

The actionsheet is opened by a tab on a tabstrip like this:

<div id="marketplace-tabstrip" data-role="tabstrip" style="font-size:125%; vertical-align:top;">
    <a href="#marketplace-recent-view" data-icon="font-flash">Just Added</a>
    <a href="#marketplace-category-view" data-icon="font-tags">Select Category</a>
    <!-- this one --> <a data-rel="actionsheet" href="#marketplace-actions" data-icon="font-dollar">Select Price <span class="km-font-resize-full"/></a>
    <a href="#marketplace-sort-view" data-icon="font-sort-alt-up">Change Order</a>
    <a href="#marketplace-location-view" data-icon="font-location">Change Location</a>
</div>

and the function that should fire when an action is clicked is:

function getCategoriesByPrice(price) {
    console.log("function getCategoriesByPrice() called");
    console.log("filter Categories by: " + price);
}

My issue is that when I click the tabstrip button, whichever option is currently selected, whether by default or most-recently selected, fires the data-action event for that selected option. Is this default behavior and is this something I can override? I'd rather the actionsheet do nothing on display and only fire if I change the selection.

Answer 1

I finally had to work around this by removing the parameters from the data-action function call like so:

<ul data-role="actionsheet" id="marketplace-actions" >
    <li><a href="#" data-action="getCategoriesByPrice_5">$$$$$</a></li>
    <li><a href="#" data-action="getCategoriesByPrice_4">$$$$</a></li>
    <li><a href="#" data-action="getCategoriesByPrice_3">$$$</a></li>
    <li><a href="#" data-action="getCategoriesByPrice_2">$$</a></li>
    <li><a href="#" data-action="getCategoriesByPrice_1">$</a></li>
</ul>

And create separate functions like this:

function getCategoriesByPrice_5() {
    getCategoriesByPrice(5);
}

function getCategoriesByPrice_4() {
    getCategoriesByPrice(4);
}

Maybe Telerik has changed this by now but, at the time, this is the only way I managed to get an actionsheet to do what I wanted.