Question

I had a longer post describing what I am trying to do, but I don’t think that is necessary so I’m making this simple. I’m working on getting Zurb Foundation to work with Datatables. It’s been pretty easy except for the drop down menu. I’ve had a bit of a tough time getting this working as a js novice. Here is the general syntax of a Foundation drop down.

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

Where I’ve run into problems is my event listener to update the table length fires on a click on the UL, so the table length is updated with the previously selected length. Because the Foundation JS is the one updating the UL LI, every attempt to detect the change doesn’t work because my code is firing before Foundation applies the class to the LI.

So to update the table it seems clear I have to detect the change of either the option value

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

or in the LI

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

I tried chaining the .change() function onto the above to detect the change in value but it’s giving me an error. I’m pretty lost here. I’ve spent quite a bit of time trying to work this out.

Edit: Just to be clear, what I’m trying to do is get the correct value for the drop down when it’s selected. I get a value now but it’s the one previously selected not the one just selected. Because of the way that Foundation works I’m having a hard time doing that with my green belt jQuery skills.

Thanks.

Answer 1

I feel a bit stupid for not figuring this out quicker; such is the learning process.

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

What I discovered in this is that ‘bind’ for some reason was only detecting the first event, whereas ‘on’ detected every event action.