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/

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

Answer 1

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

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

此举：<script language="javascript">不正确，应该是：<script type="text/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>

jquery mobile，使用.live（）或.bind（）在nav上执行ajax的正确方法

3 个答案: