Re-attaching jQuery function after dynamically loading html

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

You clould implement .on() method that way :

$("#container").on({
    mouseenter: function (event) {    
       $('.dropdown', this).slideToggle('fast');
    },            
    mouseleave: function (event) {
       $('.dropdown', this).slideUp('fast');   
    },
    mousedown: function (event) {
       //Do stuff
    }
    },
    ".dropdown"
);