.enhanceWithin()

.enhanceWithin()Возвращает: jQuery

Описание: Улучшить всех потомков всех элементов в наборе сопоставленных элементов.

.enhanceWithin()
- Этот метод не принимает никаких аргументов.

Этот метод отвечает за выполнение всех улучшений jQuery Mobile. Учитывая набор DOM-элементов, он улучшит их потомков всеми доступными виджетами.

Улучшение основано на свойстве initSelector каждого виджета. Этот селектор будет использоваться для идентификации элементов, на которых будет инициализирован виджет.

Вы можете защитить элементы и их потомков от улучшения, добавив атрибут data-enhance="false" к элементу. Это приведет к тому, что он и все его потомки будут проигнорированы .enhanceWithin(). К сожалению, проверка элементов на предмет того, являются ли они потомками элемента, помеченного data-enhance="false", является ресурсоемкой операцией. Таким образом, наличие data-enhance="false" будет учитываться только в том случае, если глобальный флаг $.mobile.ignoreContentEnabled установлен в значение true.

Примечание: 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.4.5/jquery.mobile-1.4.5.min.css">
  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.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-btn ui-corner-all ui-shadow">Insert</a></p>
</div>
 
</body>
</html>

.enhanceWithin()Возвращает: jQuery

.enhanceWithin()

Пример:

Демо: