Question

So here’s the scenario I have a list that loads some HTML into a div depending on what’s clicked:

<ul id="menu">
  <li id="empNav1" class="selected"><a href="#">Employer Overview</a></li>
  <li id="empNav2"><a href="#">Why We're Better</a></li>
  <li id="empNav3"><a href="#">Job Slots + Resume DB</a></li>
</ul>

<div class="subItem"></div>

——— jquery————

$(document).ready(function () {
   var sections = $("#menu li");
   var content = $(".subItem");


sections.click(function () {
    switch (this.id) {
        case "empNav1":
           content.html('<ul><li id="submenu1">11111</li><li>1111</li></ul>');
           break;
        case "empNav2":
            content.html('<ul><li id="submenu2">222222</li>li>22222</li></ul>');
            break;
        case "empNav2":
            content.html('<ul><li id="submenu3">333333</li>li>33333</li></ul>');
            break;
}
});
   $('li#submenu1').click(function {
       content.html('<ul><li id="submenu2">222222</li>li>22222</li></ul>');
       });     
    });

So my question is: how do I get the events to fire for content loaded in the .html event? I’ve tried a few things but none work. I want the loaded content to be able to fire events that effect the page.

Answer 1

$('li#submenu1').live('click', function {
    content.html('<ul><li id="submenu2">222222</li>li>22222</li></ul>');
});