jQuery Mobile：#hashpage中的动态元素，同时调用.live（）和直接加载？

Question

我有一个jQuery移动页面如下：

<script type="text/javascript">
  $(document).ready(function() {
    $('#bar').live("pageshow", function() {
      alert('bar');
      // TBA: relatively heavy Ajax call
    });             
  });
</script>
<div data-role="page" id="foo">
    <div data-role="header">
        <h1>Foo</h1>
    </div>
    <div data-role="content">
         <p><a href="#bar" data-role="button">Bar</a></p> 
    </div>
</div>
<!-- Start of second page -->
<div data-role="page" id="bar">
    <div data-role="header">
        <h1>Bar</h1>
    </div>
    <div data-role="content">   
        Some content
    </div>
</div>

如果我加载/foo然后点击“栏”，则会触发警报。

但是，如果我直接导​​航到/foo#bar，警报就不会触发。

我可以从this question看到可能发生的事情。

但是，我希望能够通过从foo导航到bar并直接加载bar来加载bar 两者上的动态内容。

理想情况下，我不会在jQuery Mobile之前加载它，因为我不想为那些从不看酒吧的用户减慢foo的加载速度（如果这样做有意义的话）。

我有什么方法可以做到这一点吗？