jQuery Mobile Beta：不能再使用$（'[data-role = header]'）？ [英] jQuery Mobile Beta: can no longer use $('[data-role=header]')?
问题描述
我曾经能够获得
$('[data-role=header]').first().height()
在带有jQuery 1.5.2的alpha中，但不再可以测试jQuery 1.6.1。是否有变化？
in alpha with jQuery 1.5.2, but no longer can in beta with jQuery 1.6.1. Has something changed?
完整代码 - 这将0写入console.log ...
Full code - this writes 0 to console.log...
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
console.log($('[data-role=header]').first().height());
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
//lots of code
</div>
</div>
</body>
</html>
然而，将此更改为jQuery 1.5.2和jQuery Mobile alpha：
However, change this to jQuery 1.5.2 and jQuery Mobile alpha:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
并且它会写入标头div的非零高度。
and it writes the non-zero height of the header div.
顺便提一下，jQuery 1.6.1也不是零，但没有jQuery Mobile。所以它与jQuery Mobile渲染有关。
Incidentally, it is also non-zero with jQuery 1.6.1 but without jQuery Mobile. So it's something to do with the jQuery Mobile rendering.
在发布说明以表明可能发生的事情，但我不是jQuery专家。
Can't see anything in the release notes to suggest what might have happened, but I'm no jQuery expert.
推荐答案
看起来他们确实改变了一些语法，文档：
Looks like they did change some of the syntax, Docs:
- http://jquerymobile.com/demos/1.0b1/docs/api/methods.html
当他们找到元素时jQuery
移动数据属性，请使用
自定义选择器：jqmData（），因为当
它们正在使用时，
会自动将命名空间的
数据属性合并到查找中。例如，相反
调用$（div [data-role ='page']），
你应该使用
$（div：jqmData（role ='page'） ），
内部映射到$（div [data - +
$ .mobile.ns +role ='page']）而没有
强制你连接命名空间
手动进入您的选择器。
When finding elements by their jQuery Mobile data attribute, please use the custom selector :jqmData(), as it automatically incorporates namespaced data attributes into the lookup when they are in use. For example, instead of calling $("div[data-role='page']"), you should use $("div:jqmData(role='page')"), which internally maps to $("div[data-"+ $.mobile.ns +"role='page']") without forcing you to concatenate a namespace into your selectors manually.
试试这个：
$("div:jqmData(role='header')").first().height()
这篇关于jQuery Mobile Beta：不能再使用$（'[data-role = header]'）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
