Правильный способ динамического добавления семантических элементов управления пользовательского интерфейса?

Question

Я пытаюсь обернуть голову вокруг Semantic UI, и я понимаю, как все контролируется тем, какой класс вы передаете элементу DOM, но я не могу заставить это работать при динамическом добавлении новых элементов DOM. Кажется, что семантический uj javascript запускается только при загрузке первой страницы, а не в тех новых элементах, когда я их добавляю. В настоящее время это делается только через:

$("#target").html("<new elements here>") 

Есть ли правильный способ сделать это? Я не могу найти документацию об этом на сайте Semantic UI.

Update: Чтобы дать лучший пример ...

Скажем, у меня есть этот макет:

<div class="right menu" id="rightMenu"> 
    <div class="ui dropdown link item"> 
     Courses 
     <i class="dropdown icon"></i> 
     <div class="menu"> 
     <a class="item">Petting</a> 
     <a class="item">Feeding</a> 
     <a class="item">Mind Reading</a> 
     </div> 
    </div> 
    <a class="item">Library</a> 
    <a class="item">Community</a> 
    </div> 
</div> 

И этот код выполняется:

var menu = '<div class="ui dropdown link item"> \ 
    Test \ 
    <i class="dropdown icon"></i> \ 
    <div class="menu"> \ 
    <a class="item" href="http://google.com">Google</a> \ 
    <a class="item" href="http://amazon.com">Amazon</a> \ 
    </div> \ 
</div>'; 

$("#rightMenu").append(menu) 

Новый пункт меню появляется просто отлично ... НО это фактически не выпадающее меню, как должно, пока я не запустил это:

$('.ui.dropdown') 
    .dropdown({ 
    on: 'hover' 
    }); 

После этого он открывается при наведении только отлично. Но есть ли способ, чтобы не должны повторно запускать это каждый раз?

Answer 1

Существует несколько способов добавления элементов в DOM. html (будет пустой контейнер, а затем вставить новые элементы) является одним из них. Вы также можете использовать append для добавления новых элементов в существующий набор. Но ваша проблема связана с событиями, которые не запускаются на динамически добавленных элементах. Решением для этого является делегирование событий. Прочитано more about it here.

От jQuery doc: Делегированные события имеют то преимущество, что они могут обрабатывать события из элементов-потомков, которые будут добавлены в документ позже. Выбирая элемент, который, как гарантируется, присутствует в момент присоединения делегированного обработчика событий, вы можете использовать делегированные события, чтобы избежать необходимости часто присоединять и удалять обработчики событий.

Вот небольшая демонстрация, которую я создал о добавлении новых элементов, событиях и т. Д. Надеюсь, что это поможет.

var $container = $("#container"); 
 
var count = 3; 
 

 
$container.on("click", 'button', function() { 
 

 
    alert ("You've clicked on " + $(this).text()); 
 
}); 
 

 
$("#addButtons").on("click", function() { 
 

 
    $container.append("<button>Button" + (++count) + "</button>"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <button>Button1</button> 
 
    <button>Button2</button> 
 
    <button>Button3</button> 
 
</div> 
 

 
<button id="addButtons">Add a few more!</button>

EDIT: Даже для динамического добавления семантических элементов пользовательского интерфейса, правило остается тем же самым, как это просто element. Я не уверен, есть ли другие проблемы на вашей странице. Посмотрите обновленные демонстрации ниже.

1) Использование append

2) Использование html

EDIT: Итак, вот как семантический UI Dropdown должен работать как выпадающий создается/оказываемая Javascript. Поэтому при добавлении новых опций/выпадающих списков необходимо активировать связанный метод ($('.ui.dropdown').dropdown({on: 'hover'});).Другим обходным решением является добавление класса simple к вновь созданному выпадающему списку, то есть var menu = '<div class="ui simple dropdown link item"> \, который будет вызывать раскрывающееся меню при наведении указателя мыши, но. это без анимации!

Надеюсь, что это поможет.

Answer 2

Вы можете поместить свою семантику JQuery вызов в функции и вызвать его в обратный вызов после appendTo как

$(menu).appendTo("#rightMenu").each(function() { 
activateSemantics(); 
}); 
function activateSemantics(){ 
    $('.ui.dropdown') 
    .dropdown({ 
     on: 'hover'}); 
} 

Answer 3

После добавления элементов с помощью JQuery, как сказал LShetty, семантического выпадающего меню пользовательского интерфейса, необходимо инициализировать , Но, похоже, ваша проблема заключается в повторной инициализации других выпадающих списков с помощью разных или добавленных настроек. В этом случае просто выполните инициализацию этого раскрывающегося списка.

Обратите внимание, что это не относится к каждому элементу семантического интерфейса, возможно, только к выпадающим элементам и нескольким другим.

var menu = '<div class="ui dropdown link item"> \ 
    Test \ 
    <i class="dropdown icon"></i> \ 
    <div class="menu"> \ 
    <a class="item" href="http://google.com">Google</a> \ 
    <a class="item" href="http://amazon.com">Amazon</a> \ 
    </div> \ 
</div>'; 

$("#rightMenu").append(menu) 

menu.find(".ui.dropdown") 
    .dropdown({ 
    on: 'hover' 
    });