如何将事件处理程序绑定到Zurb Foundation框架自定义下拉列表？

Question

我正在使用Zurb Foundation框架并且有一个select元素,其中框架为自定义选择元素注入HTML(下面的自定义下拉列表).

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

如何将jQuery事件处理程序绑定到自定义下拉列表,因为它在页面加载时即时插入？如果我将.change()事件处理程序绑定到原始select元素,则不会触发它.我是否假设在select元素之后会有一个div元素w /"自定义下拉列表"？如果框架发生变化,这种方法似乎可能充满潜在问题.

Answer 1

使用Foundation 5.4.5,这对我有用:

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

Answer 2

绑定到原始选择元素对我来说效果非常好

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