jQuery Mobile的，正确的方法做导航Ajax和.live（）或.bind（）

Question

我有这样

 <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> 

导航栏和我有例如

一个<div id="content">然后我加上我的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> 

但是，它只能即改变DIV内容到我的HTML，如果我点击两次按钮，如果我点击一个只给我的默认页。任何想法如何纠正它？

我在这里营造出捣鼓你测试 http://jsfiddle.net/3Rcem/

我找到使用。点击（解决方案），而不是.live（“点击”），但这个我不能绑定到“V单击”这是由JQuery的移动建议，任何人都可以帮助我使用现场？

Answer 1

我不知道为什么，但是当我将.live("click",更改为.click(时，它工作正常。

顺便说一句：$('div[id="content"]')是不对的。你应该做$('div#content')，可能只是$('#content')。

此外：<script language="javascript">是不正确的，它应该是：<script type="text/javascript">。

Answer 2

这对我有用。我所做的只是更改href来删除额外的导航部分。 （例如从#A到＃）。

 <header data-role="header" class="ui-bar"> 
      <h1> HEADER </h1> 
      <a href="index.html" data-icon="gear" class="ui-btn-right">Options</a> 
      <div id="top" data-role="navbar" data-type="horizontal"> 
       <ul> 
        <li><a href="#">A</a></li>    
        <li><a href="#">B</a></li> 
        <li><a href="#">C</a></li> 
        <li><a href="#">D</a></li> 
       </ul> 
      </div> 
     </header> 

     <div data-role="content" id="middle"> 
      <strong>Content</strong> Is <i>Here</i> 
     </div> 

     <footer data-role="footer" data-position="fixed"> 
      <h1> Copyright (C) by me </h1> 
     </footer> 
    </div> 
    <script language="javascript"> 
     $('div[id="top"] ul li a').live("click", function(e) { 
     e.stopImmediatePropagation(); 
     e.preventDefault(); 
     var html = $(this).html(); 
     var content = $('div[id="middle"]'); 
     $(content).html(html); 
     }); 
    </script> 
</body> 

Answer 3

试试这一个。我现在将标题显示为数据，但您可以更改行为以符合您的需求。希望这可以帮助！

... 
    <script language="javascript" type="text/javascript"> 
     $(document).ready(function() { 
      $('#top').find('a').click(function(e) { 
       var html = "<p>" + $(this).text() + "</p>"; 
       var content = $('#middle'); 
       content.html(html); 
       return false; 
      });   
     }); 
    </script> 
</head>