jquery .on click not detected on dynamically added content

Question

I'm using an ajax call to insert a menu.html inside my index.html, the call for the jquery script menu-script.js which handles the hide\show feature of this nested menu is properly loaded and executed into the index.html(indeed the menu is all closed), however the on.('click', function(){.. etc is not fired when menu items are clicked.

This is the script:

$(function() {
$('body').addClass('js');
var menu = $('#menu'),
    menulink = $('.menu-link'),
    menuTrigger = $('.has-subnav > a');

menulink.on('click', function(e) {
    console.log('menulink cliked');
    e.preventDefault();
    menulink.toggleClass('active');
    menu.toggleClass('active');
});

menuTrigger.on('click', function(e) {
    console.log('menutrugger cliked');
    e.preventDefault();
    $(this).toggleClass('active').next('ul').toggleClass('active');
});

$('a[href*=#]:not([href=#])').on('click', function() {
    console.log('ahref?');
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
            $('html,body').animate({ scrollTop: target.offset().top }, 600);
            return false;
        }
    }
});

And the menu.html (part of it):

<div id = "nav-menu" class = "nav-menu">
    <a href = "#menu" class = "menu-link has-subnav"><img src = "include/menu.png"></a>
    <div id = "menu" class = "menu">
        <ul>
            <li class="search">
                <!-- Google Custom Search -->
            </li>
            <!-- Core Rulebook -->
            <li class = "has-subnav">
                <a href = "#">Manuale Base</a>
                <ul class = "level-2">
                    <li><a href = "gettingStarted.html">Per iniziare</a></li>
                    <li><a href = "races.html">Razze</a></li>
                    <li><a href = "classes.html">Classi</a></li>
                    <li><a href = "usingSkills.html">Abilitàs</a></li>

Learn [**Event Delegation**](http://learn.jquery.com/events/event-delegation/) — Satpal, Apr 28 '15 at 10:56
thanks for the precisation, I'll try try to dig deeper by myself. Still learning though =) — Maxiride, Apr 28 '15 at 11:45
I followed the given instructions and modified the script, from the console I can see that the click is fired however when using $.(this) it affects the anchor
already present into the index.html instead of the new injected
as explained [here](http://learn.jquery.com/events/event-delegation/#using-the-triggering-element). What did I misunderstood? — Maxiride, Apr 29 '15 at 09:00

score 1 · Answer 1 · edited Apr 28 '15 at 11:29

1

Use event delegation:

$('parentSelector').on('event', 'element', function() {
    // Event handler code here.
});

Attach an event handler function for one or more events to the selected elements.

Docs

edited Apr 28 '15 at 11:29

itzmebibin

8,162
6
43
55

answered Apr 28 '15 at 10:55

Tushar

78,625
15
134
154

score 0 · Answer 2 · answered Apr 28 '15 at 10:55

0

to access dynamic added element you can use

$(document).on("click", ".selector", function()
{

});

answered Apr 28 '15 at 10:55

Asgu

664
5
13

score 0 · Answer 3 · edited Apr 28 '15 at 11:09

0

You can use function onclick="exampl_function()" in html while generating it

edited Apr 28 '15 at 11:09

Zee

8,051
5
31
58

answered Apr 28 '15 at 10:56

rut2

711
1
8
27

1

For jQuery problems, this is a really poor solution. Sorry. Delegated events are definitely the way to go. – Gone Coding Apr 28 '15 at 10:56

jquery .on click not detected on dynamically added content

3 Answers3