jQuery绑定/更改为Drop Down Form

时间:2012-07-07 00:25:31

标签: javascript jquery datatables zurb-foundation

我有一篇较长的帖子描述了我想要做的事情,但我认为这不是必要的,所以我这么简单。我正在努力让Zurb Foundation与Datatables合作。除了下拉菜单外,它非常简单。我有一段艰难的时间让这个作为一个新手工作。以下是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()函数链接到上面来检测值的变化,但它给了我一个错误。我在这里很丢失。我花了很多时间试图解决这个问题。

编辑:为了清楚起见,我要做的是在选择下拉菜单时获取正确的值。我现在得到一个值,但它是之前选择的值而不是刚刚选择的值。由于基金会的工作方式,我很难用绿带jQuery技能做到这一点。

感谢。

1 个答案:

答案 0 :(得分:2)

我觉得因为没有更快地搞清楚这一点而感到有些愚蠢;这就是学习过程。

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

我在这里发现的是&#39; bind&#39;由于某种原因,只检测到第一个事件,而在&#39; on&#39;检测到每个事件动作。