Question

I have been searching and experimenting for a few hours now, and I think the solution lies in the .on() function in jQuery. But I can’t seem to figure out the correct implementation.

I have a tabbed menu and I would like to add content to one of the tabs as a dropdown, the content should get loaded at document.ready:

<div id="container" class="layout" style="border: 1px solid">
   <ul class="tabs">
    <li><a id="go_archives" href="#">Archives</a> </li>
    <li><a id="go_answers" href="#">Puzzle Answers</a>
    <ul class="dropdown">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
      <li><a href="#">Five</a></li>
      <li><a href="#">Six</a></li>
    </ul>
    </li>
</div>

Here is the associated CSS:

/* menu tab styling */

ul.tabs {
  display: table;
  margin: 0;
  padding: 0 0 20px 2px;
  list-style: none;
  position: relative;
  border-bottom: 1px solid #00AEDB;
}

ul.tabs li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: table-cell;
  float: left;
  position: relative;
}

ul.tabs a {
  position: relative;
  display: block;
  font-size: 13px;
  line-height: 14px;
  font-weight: normal;
  margin: 0 7px 4px 2px;
  padding-bottom: 2px;
  text-decoration: none;
  color: #fff;
}

ul.tabs a:hover {
  border-bottom: 3px solid #FFF;
  padding-bottom: 2px;
}

/* dropdown styling */

ul.dropdown {
  margin: 0;
  padding: 0;
  display: none;
  position: absolute;
  z-index: 999;
  top: 100%;
  left:0;
}

ul.dropdown ui.dropdown {
  top: 0;
  left: 95%;
}

ul.dropdown li {
  margin: 0;
  padding: 0;
  float: none;
  position: relative;
  list-style: none;
  display: block;
}

ul.dropdown li a {
  font-size: 13px;
  line-height: 14px;
  font-weight: normal;
  display: block;
  width: 100%;
}

and the JS

$('.dropdown').parent().mouseenter(function () {
    $('.dropdown', this).slideToggle('fast');
  });

$('.dropdown').parent().mouseleave(function () {
    $('.dropdown', this).slideUp('fast');
  });

All of this works fine to slide out the UL under the go_answers LI.

In Firebug I run the following:

$.get("shite.html", function(result){
    $("#go_archives").parent().append(result);
  });

which loads shite.html

<ul class="dropdown">
        <li><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
        <li><a href="#">four</a></li>
        <li><a href="#">five</a></li>
        <li><a href="#">six</a></li>
</ul>

and it updates the DOM (I think that’s the correct term) however when I mouse over the Archives link it doesn’t slide out.

What am I missing to make it slide out?

Answer 1

When you dynamically reload the DOM elements like that you need to reattach the events. You should put your mouseenter and mouseleave commands in a function and call that function on document ready and within your get.

I set up a fiddle here to demonstrate how you could go about setting this up. The results that you have presented as being the return from an ajax call I just stored in a hidden div and when you click the test button it adds the div contents to your list item. Once the new DOM elements are in place we re-run your jquery to have the selector pick up the new elements and after manipulating the css class so you get the expected presentation your drop down works.

The overall point is to keep in mind that the events that you’re assigning to the results from your Jquery selector are only added to those elements that match the selector at the time that it runs. If you insert new elements into your DOM that would have matched the selector it doesn’t mean that your new elements will also pick up the attached behavior.