0

I have an index of categories with three levels. The first level is compiled directly by PHP and the second and third level are loaded through ajax.

Adding onClick listeners to the first level works fine and I can load the second level. But I'm unable to add listeners to the second level to load the third level.

I have been able fetch the list of the second level after loading it and loop through the list items. At that point console.log(this) displays items like:

<li><a href="http://localhost/ma/public/#" class="cat-active" id="bucket1">Antiek | Eetgerei</a></li>

console.log($(this).children('a')) does find a link:

[a#bucket1.cat-active, prevObject: r.fn.init[1]]

But then the following code doesn't display anything:

$(this).children('a').click(function () {
    console.log('Link found!');
});

Any ideas why? (I imagine it's a tiny typo, but I simply don't see it. No errors are logged either.)

Gentle153
  • 307
  • 2
  • 5
  • 15
  • 3
    If you are loading the elements dynamically you may need to delegate the events, use on() https://learn.jquery.com/events/event-delegation/ – DaniP Sep 22 '16 at 15:11
  • Thank you! I still don't understand why I couldn't add listeners to new content after loading it while the elements were found, but I managed to get it to work with this workaround and love that approach. – Gentle153 Sep 22 '16 at 15:35

0 Answers0