CODEWITHSUNDEEP
javascriptjqueryhtml
Faraji Anderson
Faraji Anderson

Reputation: 661

Jquery events not firing from inside .html loaded content

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.

Upvotes: 0

Views: 254

Answers (2)

Amry
Amry

Reputation: 4971

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

Upvotes: 1

sottenad
sottenad

Reputation: 2646

The problem stems from that content not being there on doc.ready. use this instead

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

and check out the .live docs http://api.jquery.com/live/

Upvotes: 5

Related Questions