Проблема с хешем в Jquery Mobile при использовании основных селекторов идентификаторов - PullRequest
Новая
       2

Проблема с хешем в Jquery Mobile при использовании основных селекторов идентификаторов

3 голосов
/ 21 августа 2011

Пример:

http://test.com/test.php

с чем-то вроде: 

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
    </head>
    <body>
        <div data-role="page" class="type-interior" id="home"> 
            <div data-role="wrapper" class="type-home">
                <div data-role="header" data-position="inline" id="header">
                </div>
                <div data-role="content" class="content">
                    <div id="show" style="display:none">Hi!!</div>
                    <a onClick="$('#show').show();">Show!</a><br />
                    <a href="test.php?a=<?=rand()?>">Next page</a>
                </div>
            </div>
        </div>
    </body>
</html>

Когда вы нажимаете «Показать!» однако, все работает нормально, когда вы нажимаете Next page и затем Show! это больше не работает. Похоже, это связано с # в URL после нажатия на ссылку.

Это можно решить, набрав:

$ ( 'уль [ID = показать]') шоу ();.

или

$ ( '# уль-шоу') шоу ();.

Вместо этого, однако, я действительно хотел бы знать, почему это происходит.

В firebug также есть разница;

http://o7.no/oYbOPK

Верхний не работает, ничего не показывает на странице с # в URI, а нижний работает на этой странице.

А вот так это выглядит, когда нет #, просто test.php;

http://o7.no/pvCyP7

Совмещенный; http://o7.no/qo6L65

Div отображаются серым цветом по запросу только селектора идентификаторов; это почему?

Спасибо за помощь; Я продолжаю сталкиваться с этой проблемой каждый раз, и мне действительно любопытно, почему это вообще происходит.

Ответы [ 2 ]

3 голосов
/ 21 августа 2011

После вызова Ajax, если вы заглянете в Firebug, вы увидите, что ваша страница дважды присутствует в DOM, и поэтому есть также два <div data-role="page" id="home"> и два id="show".

Так что, когдаВы запускаете $ ("# show"). что-то (), это всегда элемент FIRST с этим идентификатором, который срабатывает.Не забывайте, что ID должен быть уникальным на странице xhtml.

Когда вы используете синтаксис, такой как ul[id=show], ul#show, jquery будет запускать все объекты, не толькопервый.Вот почему это работает.

Возможный обходной путь - использовать страницу в качестве пространства имен 

<div data-role="page" class="type-interior" id="home"> 
    <div data-role="wrapper" class="type-home">
        <div data-role="header" data-position="inline" id="header"></div>
        <div data-role="content" class="content">
            <div class="show" style="display:none">Hi!!</div>
            <a class="link" href="#">Show!</a><br />
            <a href="test3.htm?id=3">Next page</a>
        </div>
   </div>
</div>

<script type="text/javascript">
    $('#home').live('pagecreate',function(event){
        $(".link", this).live('click', function(page) {
            $(this).closest('div[data-role=page]').find(".show").show();
        });
    });
</script>

Но это не лучшее решение.Если ваши страницы разные, дайте им идентификаторы или используйте классы и найдите хорошего предка!

1 голос
/ 10 сентября 2012

Просто была похожая проблема, это работает лучше - 

$.mobile.activePage.find('#show').show();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...