Question

I have a navigation bar like this

      <div id="top" data-role="navbar" data-type="horizontal">
            <ul>
            <li><a href="#a">A</a></li>
            <li><a href="#b">B</a></li>
            <li><a href="#c">C</a></li>
            <li><a href="#d">D</a></li>
            </ul>
        </div>

And I have a <div id="content"> for example

Then I add my javascript

<script language="javascript">
$('div[id="top"] ul li a').live("click", function(e) {
    e.stopImmediatePropagation();
    e.preventDefault();
    var html = //SOME HTML
    var content = $('div[id="content"]');
    $(content).html(html);
});
</script>

However, It only works i.e. change the div content to my HTML if I click twice to the button, if I click one It only give me the default page. Any idea how to correct it ?

I create a fiddle here for you to test
http://jsfiddle.net/3Rcem/

I find a solution to use .click() instead of .live(‘click’) but with this I cannot bind to the ‘vclick’ which is suggested by Jquery mobile, anyone can help me with using live ?

Answer 1

I don’t know why, but when I changed .live("click", to .click( it worked fine.

BTW this: $('div[id="content"]') is not right. You should do $('div#content') and probably just $('#content').

Also this: <script language="javascript"> is not correct, it should be: <script type="text/javascript">.