Come si associa un gestore di eventi a un dropdown personalizzato di framework di Zurb Foundation?

Question

Utilizzo il framework Zurb Foundation e ho un elemento select in cui il framework inietta HTML per l'elemento di selezione personalizzato (menu a discesa personalizzato sotto).

<select id="caseModule" style="display: none;"> 
    <option value="gifting">Gifting</option> 
    <option value="other">Other</option> 
</select> 
<div class="custom dropdown" style="width: 97px;"> 
    <a href="#" class="current">Other</a> 
    <a href="#" class="selector"></a> 
    <ul style="width: 95px;"> 
    <li>Gifting</li> 
    <li class="selected">Other</li> 
    </ul> 
</div> 

Come posso associare un gestore di eventi jQuery per la discesa personalizzato in quanto è inserire on-the-fly al caricamento della pagina? Se lego un gestore di eventi .change() all'elemento di selezione originale, non viene attivato. Presumo che ci sarà un elemento div w/la classe "dropdown personalizzato" immediatamente dopo l'elemento select? Questo approccio sembra essere irto di potenziali problemi se il quadro cambia.

Answer 1

Binding al select-elemento originale funziona perfettamente bene per me

$(document).ready(function() { 
    $('#caseModule').change(function() { 
     console.log('changed'); 
    }); 
}); 

Answer 2

Con Fondazione 5.4.5, questo sta lavorando per me:

$('.dropdown').on('opened.fndtn.dropdown', function() { 
    return console.log('opened'); 
}); 
$('.dropdown').on('closed.fndtn.dropdown', function() { 
    return console.log('closed'); 
});