Мобильный JQuery, правильный способ сделать AJAX на Nav с помощью .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/

Я нашел решение использовать .click () вместо .live ('click'), но с этим я не могу привязаться к 'vclick', который предлагает Jquery mobile, любой может помочь мне с использованием live? *

Answer 1

Попробуйте это.Теперь я отображаю заголовок как данные, но вы можете изменить поведение в соответствии со своими потребностями.Надеюсь, это поможет!

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

Не знаю почему, но когда я сменил .live("click", на .click(, все заработало нормально.

Кстати, это: $('div[id="content"]') не правильно. Вы должны сделать $('div#content') и, вероятно, просто $('#content').

Также это: <script language="javascript"> не правильно, оно должно быть: <script type="text/javascript">.

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>