jquery mobile，使用 .live() 或 .bind() 在导航上执行 ajax 的正确方法

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>

我有一个

例如

然后我添加我的 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/

我找到了使用 .click() 而不是 .live 的解决方案（'click'）但是这样我无法绑定到 Jquery mobile 建议的'vclick'，任何人都可以帮助我使用 live 吗？

Answer 1

我不知道为什么，但是当我将 .live("click", 更改为 .click( 时，效果很好。

顺便说一句： $('div [id="content"]') 不正确，您应该执行 $('div#content') ，并且可能只是 $('#content')代码>

也是这样的：<代码><脚本language="javascript"> 不正确，应该是：

Answer 2

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

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

Answer 3

这对我有用。我所做的只是更改 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>