Come arrivare elemento selezionato nel menu a discesa bootstrap, in cui discesa è dinamicamente popolato

Question

Questo è simile a How to Display Selected Item in Bootstrap Button Dropdown Title

L'unica differenza, il mio elenco a discesa non è statico ed è popolato attraverso la risposta Ajax. Il codice sottostante non funziona solo per gli elementi<li> che vengono popolati in modo dinamico.

Per testare in precedenza, ho intenzionalmente messo uno statico <li> quando faccio clic su quell'elemento, posso vedere il messaggio di successo nella console. Ma quando clicco su <li> che viene aggiunto dinamicamente, non ottengo nulla in console.

Credo, ci sono alcune conoscenze fondamentali jQuery che mi mancano qui. guru di jQuery, commenti/pensieri?

Ecco un codice per ulteriori chiarimenti.

Java Script Codice:

stampa opzione selezionata in consolle

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

Compilazione discesa dalla risposta ajax JSON

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

codice HTML:

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

Così , Ancora una volta, se clicco su Static test Option posso vedere un messaggio in console: Selected Option: Static test Option

Ma, quando clicco su Option2Option 3 che è popolata dalla risposta ajax, non vedo nulla nella console.

Fammi sapere se qualcosa non è chiaro. Proverò a spiegare ulteriormente.

Answer 1

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

Questo è solo semplice delega evento ... Elementi che non esistono al caricamento della pagina deve avere l'evento delegato a un elemento padre statica che fa esistenti a caricamento della pagina.

Usiamo jQuery's .on() per completare questo.

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

obbligatorio Modifica

Si prega di non realmente legano elementi al $(document) e invece scegliere l'elemento principale più vicina che è statico. Questo è per motivi di prestazioni.