How do you bind an event handler to a Zurb Foundation framework custom dropdown?

Question

I am using Zurb Foundation framework and have a select element where the framework injects HTML for the custom select element (custom dropdown 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 bind a jQuery event handler to the custom dropdown since it is insert on-the-fly when the page loads? If I bind a .change() event handler to the original select element it is not fired. Do I assume there will be a div element w/ the "custom dropdown" class immediately after the select element? That approach seems like it could be fraught w/ potential problems if the framework changes.

Answer 1

With Foundation 5.4.5, this is working 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 perfectly fine for me

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