javascript - jQuery 绑定(bind)/更改下拉表单

Question

我有一篇较长的文章描述了我正在尝试做的事情，但我认为没有必要，所以我将其简化。我正在努力让 Zurb Foundation 与 Datatables 合作。除了下拉菜单之外，这非常简单。作为一个 js 新手，我在让这个工作上遇到了一些困难。以下是 Foundation 下拉列表的一般语法。

<label for="customDropdown">Dropdown Label</label>
<select style="display:none;" id="customDropdown">
  <option select="selected">This is a dropdown</option>
  <option>This is another option</option>
  <option>Look, a third option</option>
</select>
<div class="custom dropdown">
  <a href="#" class="current">This is a dropdown</a>
  <a href="#" class="selector"></a>
  <ul>
    <li class="selected">This is a dropdown</li>
    <li>This is another option</li>
    <li>Look, a third option</li>
  </ul>
</div>

我遇到的问题是我的更新表长度的事件监听器在单击 UL 时触发，因此表长度会使用之前选择的长度进行更新。因为 Foundation JS 是更新 UL LI 的，所以每次检测更改的尝试都不起作用，因为我的代码在 Foundation 将类应用到 LI 之前就已触发。

因此，要更新表格，显然我必须检测选项值的更改

$('div#example_length form select').val()

或在 LI 中

$('div.custom ul li.selected').text()

我尝试将 .change() 函数链接到上面来检测值的变化，但它给了我一个错误。我在这里很迷路。我花了相当多的时间来解决这个问题。

编辑:需要明确的是，我想做的是在选择下拉列表时获取正确的值。我现在得到一个值，但它是之前选择的值，而不是刚刚选择的值。由于 Foundation 的工作方式，我很难用我的绿带 jQuery 技能来做到这一点。

谢谢。

Answer 1

我觉得自己有点愚蠢，因为没有更快地弄清楚这一点；这就是学习过程。

$('div.custom ul', nLength).on('click', 'li', function(event) {
foo = $(this).text();
console.log(foo);
});

我在此发现，“bind”由于某种原因仅检测到第一个事件，而“on”则检测到每个事件操作。