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). ``` ``` 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.

Accepted Answer

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');
});
```

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

Solution

Problem