JQuery Mobile .enhanceWithin()用法及代码示例

.enhanceWithin()

返回：jQuery

说明：增强匹配元素集中所有元素的所有子元素。

```
.enhanceWithin()
```
- 此方法不接受任何参数。

此方法负责执行所有 jQuery Mobile 增强函数。给定一组 DOM 元素，它将使用所有可用的小部件来增强它们的子元素。

增强基于每个小部件的initSelector 属性。此选择器将用于标识将在其上实例化小部件的元素。

您可以通过将属性data-enhance="false" 添加到元素来屏蔽元素及其子元素。这将导致它及其所有子代被 .enhanceWithin() 忽略。不幸的是，检查元素以查看它们是否是标记为data-enhance="false" 的元素的子元素是performance-intensive。因此，仅当全局标志 $.mobile.ignoreContentEnabled 设置为 true 时才会考虑 data-enhance="false" 的存在。

警告： enhanceWithin不会尝试解决与小部件增强顺序相关的问题。例如，增强filterable之前的小部件checkboxradio小部件被增强可能会导致checkboxradio小部件显示不正确。如果这对您有影响，那么您必须确保需要及早增强的小部件在其余小部件之前实例化。实现这一点的一种可能性是在页面小部件的pagebeforecreate事件。

例子：

在运行时注入新内容并使用 enhanceWithin 对其进行增强。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>enhanceWithin demo</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
  <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
</head>
<body>
 
<script>
$.mobile.document.on( "click", "#insert-content", function() {
  var content =
    "<div>" +
      "<div data-role='collapsible' data-collapsed='false'>" +
        "<h2>Cities</h2>" +
        "<ul data-role='listview'>" +
          "<li><a href='http://en.wikipedia.org/wiki/Sydney'>Sydney</a></li>" +
          "<li><a href='http://en.wikipedia.org/wiki/Yekaterinburg'>Yekaterinburg</a></li>" +
          "<li><a href='http://en.wikipedia.org/wiki/Asuncion'>Asunci&oacute;n</a></li>" +
          "<li><a href='http://en.wikipedia.org/wiki/Liege'>Li&egrave;ge</a></li>" +
          "<li><a href='http://en.wikipedia.org/wiki/Kinshasa'>Kinshasa</a></li>" +
          "<li>" +
            "<div data-role='controlgroup' data-type='horizontal'>" +
              "<a href='#' class='ui-btn ui-shadow ui-corner-all'>Add</a>" +
              "<a href='#' class='ui-btn ui-shadow ui-corner-all'>Remove</a>" +
              "<a href='#' class='ui-btn ui-shadow ui-corner-all'>Edit</a>" +
            "</div>" +
          "</li>" +
        "</ul>" +
      "</div>" +
    "</div>";
 
  $( content ).appendTo( "#page-content" ).enhanceWithin();
});
</script>
<div data-role="header">
  <h2>jQuery Mobile Example</h2>
</div>
<div role="main" class="ui-content" id="page-content">
  <p>Content will be added at runtime when you click the button below.</p>
  <p><a href="#" id="insert-content" class="ui-button ui-corner-all ui-shadow">Insert</a></p>
</div>
 
</body>
</html>

演示：

相关用法

注：本文由纯净天空筛选整理自jquerymobile.com大神的英文原创作品 .enhanceWithin()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。