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

绑定到原始的select-element对我来说非常好

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

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

2 个答案: