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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Uncle Slug
  • 853
  • 1
  • 13
  • 26
  • In the case of dynamically generated content, *delegate* the event to an existing parent element instead of directly binding. – Boaz Jan 30 '14 at 20:16
  • 2
    This question gets asked about 5 times per day in some form or another. – crush Jan 30 '14 at 20:17
  • It's always been a common issue, as it is a very confusing concept for beginners. – Boaz Jan 30 '14 at 20:17

1 Answers1

2

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

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

Wojciech Bednarski
  • 6,033
  • 9
  • 49
  • 73
  • 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 Jan 30 '14 at 20:49
  • 1
    @UncleSlug basically `#L1` is the enclosed scope, for example you can add `body` there or other parent element. – Wojciech Bednarski Jan 30 '14 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 Jan 30 '14 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 Jan 31 '14 at 11:22