How to associate an event handler with a drop-down list of a Zurb Foundation database?

Question

I use the Zurb Foundation framework and have a select element in which the environment embeds HTML for the custom select element (custom drop-down list below).

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

How do I associate a jQuery event handler with a custom drop-down list, since it is inserted on the fly when the page loads? If I bind the .change () event handler to the original selection element, it does not fire. Do I assume that after the select element there will be a div element with the class "custom dropdown"? This approach seems to be fraught with problems / potential problems if the wireframe changes.

Answer 1

With Foundation 5.4.5, this works for me:

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

Answer 2

Binding to the original select element works fine for me

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