Richtige Möglichkeit, um semantische UI-Steuerelemente dynamisch hinzuzufügen?

Question

Ich versuche, meinen Kopf um Semantic UI zu wickeln und ich verstehe, wie alles durch welche Klasse gesteuert wird, die Sie einem DOM-Element geben, aber ich kann nicht wirklich funktionieren, wenn Sie neue DOM-Elemente dynamisch hinzufügen. Es scheint, dass das semantische ui javascript nur beim Laden der ersten Seite ausgeführt wird und nicht bei diesen neuen Elementen, wenn ich sie hinzufüge. Derzeit ist dies nur über:

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

Gibt es die richtige Möglichkeit, dies zu tun? Ich kann keine Dokumentation dazu auf der Semantic UI-Site finden.

Update: ein besseres Beispiel geben ...

Sagen, ich habe dieses Layout:

<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> 

Und dieser Code ausgeführt wird:

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) 

Der neue Menüpunkt scheint einfach gut ... ABER es tatsächlich nicht Drop-down wie es sollte, bis ich dies ausführen:

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

Danach öffnet es auf Hover ganz gut. Aber gibt es einen Weg zu nicht müssen das jedes Mal erneut ausführen?

Answer 1

Es gibt einige Möglichkeiten, Elemente zu DOM hinzuzufügen. html (würde den Container leeren und dann neue Elemente einfügen) ist einer von ihnen. Sie können auch append verwenden, um neue Elemente an eine bestehende Menge anzuhängen. Ihr Problem besteht jedoch darin, dass Ereignisse bei dynamisch hinzugefügten Elementen nicht ausgelöst werden. Die Lösung hierfür ist die Ereignisdelegierung. Lesen Sie more about it here.

Vom jQuery doc: Übertragene Ereignisse haben den Vorteil, dass sie Ereignisse von untergeordneten Elementen verarbeiten können, die zu einem späteren Zeitpunkt in das Dokument eingefügt werden. Indem Sie ein Element auswählen, das zum Zeitpunkt der Anbindung des delegierten Event-Handlers garantiert vorhanden ist, können Sie delegierte Ereignisse verwenden, um zu vermeiden, dass Ereignishandler häufig angefügt und entfernt werden müssen.

Hier ist eine kurze Demo, die ich über das Hinzufügen neuer Elemente, Event Delagation usw. eingerichtet hatte. Hoffe, dass hilft.

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: Auch für Semantic UI-Elemente dynamisch hinzugefügt, bleibt der Regel die gleichen wie es nur ein element ist. Ich bin mir nicht sicher, ob es auf Ihrer Seite noch andere Probleme gibt. Sehen Sie sich die aktualisierten Demos unten an.

1) Mit append

2) html

EDIT: Also, das ist, wie das Semantic UI Dropdown soll arbeiten, wie die Drop-Down erstellt/gerendert von Javascript. Wenn neue Optionen/Dropdowns hinzugefügt werden, muss daher die zugehörige Methode ($('.ui.dropdown').dropdown({on: 'hover'});) erneut ausgelöst werden.Eine weitere Problemumgehung ist das Hinzufügen der simple-Klasse zu dem neu erstellten Dropdown, d. H. var menu = '<div class="ui simple dropdown link item"> \, die das Dropdown-Menü auslösen würde, wenn Sie die Maustaste loslassen, aber. Es ist ohne Animation!

Hoffe, dass hilft.

Answer 2

Sie können Ihre Semantik jquery Aufruf in Funktion setzen und es in einem Rückruf rufen nach einem appendTo wie

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

Answer 3

Nach Elementen über JQuery Zugabe wie LShetty sagte, für die semantischen UI Drop-Down, müssen Sie es initialisieren . Aber es scheint, dass es Ihre Sorge ist, dass Sie die anderen Dropdown-Listen auch mit anderen oder zusätzlichen Einstellungen neu initialisieren. In diesem Fall initialisieren Sie einfach das hinzugefügte Dropdown-Menü.

Beachten Sie, dass dies nicht für alle semantischen UI-Elemente gilt, wahrscheinlich nur für Dropdown-Elemente und einige andere.

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' 
    });