jQuery mobile, html5 phone links with javascript instead
<p>I'm using a split-button list in jQuery mobile, and I notice I can't have links inside of my buttons without some strange formatting happening.</p>

<p>Because of this, a phone link I would normally write as:</p>

<pre><code>&lt;a href="tel+1234567898"&gt;123-456-7898&lt;/a&gt;
</code></pre>

<p>I am trying to do with a bit of javascript:</p>

<pre><code>$('.phone').bind('click', function() {
    var phone = $(this).attr('data-phone');
    window.location = "tel:+" + phone;
});
</code></pre>

<p>HTML/PHP:</p>

<pre><code>&lt;span data-email="&lt;?php echo $phone; ?&gt;" class="phone"&gt;&lt;?php echo $phone; ?&gt;&lt;/span&gt;
</code></pre>

<p>This is recognized "in the browser" (Chrome asks me if I want to open communicator) but doesn't appear to work in an iPhone...</p>

<p><strong>Edit:</strong></p>

<p>Split button lists work like this:</p>

<pre><code>&lt;li&gt;&lt;a href="some-link"&gt;Content&lt;/a&gt;&lt;a href="another-link"&gt;&lt;/a&gt;&lt;/li&gt;
</code></pre>

<p>So if you put a link phone into the first part ("some-link") it's invalid HTML (maybe?) and so jQuery mobile takes out all the content inside of  so I can't just seem to change the CSS to fix this.</p>
