jQuery Mobile List Item Split Button without Link on main item

Question

Let's say I have a jQuery Mobile site with a bunch of <li> with a split icon (data-icon="grid").

Is it possible to have the left-hand side of the list item not wrapped in a href but keep the button on the right-hand side?

Example: http://jsfiddle.net/SSQMB/

I have tried:

$(selection).contents().unwrap();

And this works, it removes the link as requested (and fixes the problem I've outlined below), but it goes and breaks a whole bunch of the layout and styling on the list item.

The issue I'm trying to resolve is this:

• I have about 100 <li> items on a page
• Each <li> might have a <select> element in it with 5-10 options.
• When using the default jQuery Mobile styling of a <select> everything works fine
• However this has a major performance hit. An iPhone 4S struggles to scroll, and an iPad 2 is virtually unusuable (Android is actually better for once, but still not perfect)
• Putting data-role="none" on the <select> elements makes the page fast and workable again
• However, it breaks on a desktop browser (Firefox in particular) because when you click to choose an item in the <select>, the link from behind the <select> is triggered and the <select> box is cancelled

Any ideas?

Answer 1

OK, after delving through the stock jQuery Mobile CSS, I found the styles that determine the formatting for the <li>. I duplicated these in a seperate stylesheet and made them apply to a <span> instead of an <a>:

.ui-li .ui-btn-text span.ui-link-inherit { text-overflow: ellipsis; overflow: hidden; white-space: nowrap;  }
.ui-li .ui-btn-inner span.ui-link-inherit { padding: .7em 15px .7em 15px; display: block; }

Then, set up the <li> as such:

<li data-icon="grid">
  <a href="#" onclick="return false;" class="leftLink">
    <span class="ui-link-inherit">
      .... content ....
    </span>
  </a><a href="#"> ... </a>
</li>

Then some jQuery:

$('.leftLink').parent().parent().parent().removeClass('ui-btn');
$('.leftLink').contents().unwrap();

and Voila: http://jsfiddle.net/Zwhs3/2/