例:
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或使用类,然后找到好祖先!