JQuery UI - Cloned Tabs - не переключение вкладок - PullRequest
Новая
       40

JQuery UI - Cloned Tabs - не переключение вкладок

0 голосов
/ 18 июня 2019

Я клонирую элемент JQuery UI Tabs. Вкладки создаются нормально из клонированных экземпляров, но я не могу изменить вкладки в экземплярах. Оригинальный элемент tabs работает нормально. 

$("#tabs").tabs();

$('#button').click(function() {
  $('#tabs').clone().appendTo('body');
});
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id='tabs'>
  <ul>
    <li><a href="#tab1">Tab 1</a>
    </li>
    <li><a href="#tab2">Tab 2</a>
    </li>
    <li><a href="#tab3">Tab 3</a>
    </li>
  </ul>
  <div id="tab1">aa</div>
  <div id="tab2">bb</div>
  <div id="tab3">cc</div>
</div>
<button id='button'>Create Tabs</button>

1010 * скрипка *

1 Ответ

1 голос
/ 18 июня 2019

Вам необходимо повторно инициализировать клонированные вкладки 

$("#tabs").tabs();

$('#button').click(function() {
  $('#tabs').clone().appendTo('body').tabs();
});
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id='tabs'>
  <ul>
    <li><a href="#tab1">Tab 1</a>
    </li>
    <li><a href="#tab2">Tab 2</a>
    </li>
    <li><a href="#tab3">Tab 3</a>
    </li>
  </ul>
  <div id="tab1">aa</div>
  <div id="tab2">bb</div>
  <div id="tab3">cc</div>
</div>
<button id='button'>Create Tabs</button>

Я бы также заменил id новых вкладок, чтобы избежать 2 элементов с одинаковыми id.

...