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>