0

I'm attempting to dynamically expose deeper levels of navigation by injecting html into empty divs. While the html is being successfully injected into the 2nd nav level, I can not get the html to inject into the 3rd level div. I believe that the problem exists because the event listener is ignoring the dynamically generated content, but I can't figure out a way to fix it. Below is the JS. I have also provided a simple jsfiddle of what I am trying to accomplish. Click the blue links to expose each successive level of navigation. It fails at the 2nd level. http://jsfiddle.net/22qQt/17/

$('#L1A').click(function () {
    $('#L2 > div.menuWrap > ul.menuItems').html('<li class="navTitle">Campus Life</li><li class="item">Overview</li><li class="link" id="L1A-2A">Housing</li><li class="link" id="L1A-2B">Fitness & Recreation</li><li class="link" id="L1A-2C">Health Services</li><li class="item">Campus Library</li><li class="item">Life in Philly</li><li class="item">Activities Office</li><li class="item">Student Life Office</li>');
});
    
$('#L1A-2A').click(function () {
    $('#L3 > div.menuWrap > ul.menuItems').html('<li class="navTitle">Housing</li><li class="item">Overview</li><li class="item">Policies</li><li class="item">Renters Insurance</li><li class="item">Move-In Day</li>');
});

By the way - I know there is probably a better, less hacky way to inject all that html. However, it's only for a prototype and at this point I don't have the time to figure out a better way.

Improve this question
3
  • In the case of dynamically generated content, delegate the event to an existing parent element instead of directly binding.
    – Boaz
    Commented Jan 30, 2014 at 20:16
  • 2
    This question gets asked about 5 times per day in some form or another.
    – crush
    Commented Jan 30, 2014 at 20:17
  • It's always been a common issue, as it is a very confusing concept for beginners.
    – Boaz
    Commented Jan 30, 2014 at 20:17

1 Answer 1

Reset to default
2

You need to use http://api.jquery.com/on/ instead of click.

Your improved fiddle http://jsfiddle.net/22qQt/19/

Improve this answer
4
  • This worked. I had tried to use .on based on the jquery documentation and other articles but I could not get it right. Could you explain why it works in this situation? In the jsfiddle that you linked to, I was not expecting $('#L1').on('click', '#L1A', function() {...
    – Uncle Slug
    Commented Jan 30, 2014 at 20:49
  • 1
    @UncleSlug basically #L1 is the enclosed scope, for example you can add body there or other parent element.
    – Wojciech Bednarski
    Commented Jan 30, 2014 at 20:54
  • Thank you. I was under the assumption that the selector contained in $() had to be the element that was being clicked (as in .click). I did not down vote you. I just got the privilege to upvote after this question, so that's exactly what I'll do.
    – Uncle Slug
    Commented Jan 30, 2014 at 21:04
  • @UncleSlug You can read more about that in section Event performance under the link I provided. Another thing is that you should not use so many IDs in your document, intact you don't need any IDs there unless other circumstances are there I'm not aware of.
    – Wojciech Bednarski
    Commented Jan 31, 2014 at 11:22

Not the answer you're looking for? Browse other questions tagged or ask your own question.