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()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。