Wie in Bootstrap-Drop-Down-Element, ausgewählt werden, in dem Drop-Down-dynamisch

Question

Dies ist ähnlich How to Display Selected Item in Bootstrap Button Dropdown Title

Die einzigen Unterschied ausgefüllt ist, ist meine Dropdown-Liste nicht statisch, und es wird durch Ajax-Antwort bevölkert. Der folgende Code funktioniert nicht nur für<li> Elemente, die dynamisch befüllt werden.

Um oben zu testen, setze ich absichtlich eine statische <li>, wenn ich auf dieses Element klicken, kann ich Erfolgsmeldung in der Konsole sehen. Aber wenn ich auf <li> klicke, die dynamisch angehängt werden, bekomme ich nichts in der Konsole.

Ich glaube, es gibt einige jQuery grundlegende Kenntnisse, die ich hier vermisse. jQuery Gurus, Kommentare/Gedanken?

Hier ist ein Code zur weiteren Erläuterung.

Java Script Code:

Printing ausgewählte Option in der Konsole

$(".dropdown-menu li a").click(function() { 
     console.log("Selected Option:"+$(this).text()); 
}); 

Bestücken Drop-Down von Ajax-JSON-Antwort

$.each(response, function (key, value) { 
    $("#dropDownUL").append("<li> <a tabindex=\"-1\" href=\"#\" align=\"left\"> " + value + "</a> </li>"); 
}) 

HTML-Code:

<div class="dropdown btn"> 
    <div id="dropDownId" class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#"> 
     Collections 
     <b class="caret"></b> 
    </div>   
    <ul id="dropDownUL" class="dropdown-menu pull-left" role="menu" aria-labelledby="dLabel"> 
    <li><a tabindex="-1" href="#" align="left">Static test Option</a></li> 
    </ul> 


</div> 

So wenn ich auf Static test Option klicken, noch einmal, kann ich Nachricht in der Konsole sehen: Selected Option: Static test Option

Aber, wenn ich auf Option2Option 3 klicken, die von Ajax-Antwort ausgefüllt ist, sehe ich nicht alles in der Konsole.

Lassen Sie mich wissen, wenn etwas nicht klar ist. Ich werde versuchen, weiter zu erklären.

Answer 1

$(document).on('click', '.dropdown-menu li a', function() { 
    console.log("Selected Option:"+$(this).text()); 
}); 

Dies ist nur einfaches Ereignis Delegation ... Elemente, die auf Seite lädt nicht existieren, die zu einem statischen Elternelement delegiert Ereignis haben muss, dass bei Laden der Seite nicht vorhanden ist.

Wir nutzen jQuery's .on(), um dies zu vervollständigen.

$(staticElement).on(event, dynamicElement, function(){ //etc }); 

Obligatorisch bearbeiten

Bitte binden nicht eigentlich Elemente zum $(document) und stattdessen die nächste übergeordnete Element wählen, das statisch ist. Dies ist aus Leistungsgründen.