如何将事件处理程序绑定到 Zurb Foundation 框架自定义下拉菜单？答案

【问题标题】：How do you bind an event handler to a Zurb Foundation framework custom dropdown?如何将事件处理程序绑定到 Zurb Foundation 框架自定义下拉菜单？
【发布时间】：2013-02-16 00:34:24
【问题描述】：

我正在使用 Zurb Foundation 框架，并且有一个选择元素，其中框架为自定义选择元素注入 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() 事件处理程序绑定到原始选择元素，它不会被触发。我是否假设在选择元素之后立即有一个带有“自定义下拉”类的 div 元素？如果框架发生变化，这种方法似乎会充满潜在问题。

【问题讨论】：

标签： jquery zurb-foundation

【解决方案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');
});

【讨论】：

【解决方案2】：

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

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

【讨论】：