例:

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>


当您单击“显示!”时但是,当您单击“下一页”然后单击“显示!”时,它工作正常。它不再工作了。这似乎是由于单击链接后URL中的#引起的。

可以通过以下方法解决:

$('ul [id = show]')。show();

要么

$('ul#show')。show();

相反,我真的很想知道为什么会这样。

在萤火虫中,也有区别。

http://o7.no/oYbOPK

最上面的一个不起作用,在uri中带#的页面上什么也不显示,而最下面的一个在该页面上起作用。

这就是没有#时的样子,只有test.php;

http://o7.no/pvCyP7

结合; http://o7.no/qo6L65

仅当id选择器要求时,div才会显示为灰色;这是为什么?

感谢您的帮助;我每次都在碰这个问题,我真的很好奇为什么会发生。

最佳答案

在Ajax调用之后,如果您查看Firebug,您将看到您的页面在DOM中存在两次,因此,还有两个<div data-role="page" id="home">和两个id="show"

因此,当您触发$(“#show”)。something()时,总是带有此ID的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>


但这不是最好的解决方案。如果您的页面不同,请给他们提供不同的ID或使用类,然后找到好祖先!

09-10 10:36
查看更多