jQuery on() click event handler not working

Question

I am trying to add a click event handler to dynamically added links to prevent the default behaviour (but allow propagation so that the click is passed to to another handler below).

When i do:

$('.menulink').on('click', function(e) {
    e.preventDefault();
    console.log('menu clicked');
    alert('now');
});

within $(window).load then it works correctly on desktop. However if i use:

$(document).on('click', '.menulink', function(e) {
    e.preventDefault();
    console.log('menu clicked');
    alert('now');
});

within $(document).ready then it never fires. FYI I'm using Jquery 1.11.1.

Can anyone suggest why the delegated version doesn't work (i've tried using other visible parent containers but went back to using $(document) for testing, but none work).

Additionally even in the first working example it works correctly on desktops but on Android it sometimes fires and sometimes just follows the link url without firing the click handler but there doesn't seem to be any logic as to when it works and when it doesn't!

Can anyone see what i'm doing wrong!! (please see 'UPDATE 2 AS REQUESTED' below which includes a fiddle showing the problem)

UPDATE AS REQUESTED:

I am using http://tikku.com/jquery-radmenu-plugin for a radial menu which takes a list and programatically creates another element for the menu using the list items. As a result the links are dynamically added into the radial menu (around each item) when the plugin loads, the initial HTML list is:

<div id="radial_container" class="ui-radmenu-parent visible">
    <ul style="display: none;" class="list">
        <li class="item"><div class="menuopt2"><a class="menulink" href="/url2"><img class="svghover" alt="OPT2" src="/img/pages/2.png"><div class="menulabel">OPT2</div></a></div></li>
        <li class="item"><div class="menuopt14"><a class="menulink" href="/url14"><img class="svghover" alt="OPT14" src="/img/pages/14.png"><div class="menulabel">OPT14</div></a></div></li>
        <li class="item"><div class="menuopt20"><a class="menulink" href="/url20"><img class="svghover currentsectionicon" alt="OPT20" src="/img/pages/20-ro.png"><div class="menulabel">OPT20</div></a></div></li>
        <li class="item"><div class="menuopt74"><a class="menulink" href="/url74"><img class="svghover" alt="OPT74" src="/img/pages/74.png"><div class="menulabel">OPT74</div></a></div></li>
    </ul>
</div>

After the plugin loads it generates the following markup:

<div class="radial_div" style="position: relative;">
    <div style="position: absolute; left: 596.277px; top: 93.8734px;" class="radial_div_item"><div class="menuopt2"><a class="menulink" href="/url2"><img class="svghover" alt="OPT2" src="/img/pages/2.png"><div class="menulabel">OPT2</div></a></div></div>
    <div style="position: absolute; left: 874.839px; top: 11.8205px;" class="radial_div_item"><div class="menuopt14"><a class="menulink" href="/url14"><img class="svghover" alt="OPT14" src="/img/pages/14.png"><div class="menulabel">OPT14</div></a></div></div>
    <div style="position: absolute; left: 1165.16px; top: 9.64253px;" class="radial_div_item"><div class="menuopt20"><a class="menulink" href="/url20"><img class="svghover currentsectionicon" alt="OPT20" src="/img/pages/20-ro.png"><div class="menulabel">OPT20</div></a></div></div>
    <div style="position: absolute; left: 1443.72px; top: 91.8418px;" class="radial_div_item"><div class="menuopt74"><a class="menulink" href="/url74"><img class="svghover" alt="OPT74" src="/img/pages/74.png"><div class="menulabel">OPT74</div></a></div></div>
</div>

UPDATE 2 AS REQUESTED:

I have created a massively simplified fiddle just showing the menu and associated links. If you visit http://jsfiddle.net/7asLq/2/ then you can see it correctly follows the onselect handler of radmenu and the click handler of .menulink and prevents direction to the menulink href due to preventdefault. If you replace "$('.menulink').on('click', function(e) {" with "$(document).on('click', '.menulink', function(e) {" (this is commented out in the code) then it runs the onselect handler and just directs to the menulink href and never runs the menulink click handler. Hopefully this shows the problem more clearly?

Thanks so much,

Dave

Answer 1

Couple of issues. First the styling could prevent the links from being targetted. The anchors are styled such that their computed size is 0 x 0 (use the Chrome DOM inspector to see this when you hover over a link).

The quick fix is to give them the same size as the button:

.menulink{
    display: block;
    width:30px;
    height:30px;
}

The second problem is that the plugin stops propagation of the click event internally, so the delegated handler will never see it.

You can comment out a single line of code at the end of selectMenuitem in the plugin to fix the immediate problem (this is the non-min version):

function selectMenuitem(evt) {
    var $this = $(this);
    var $element = $(evt.target);
    var container = $.radmenu.container;
    if (!$element.hasClass(container.itemClz))
        $element = $element.closest("." + container.itemClz);
    var isInNested = $element.parents("." + container.itemClz).length > 0;
    var index = $element.index();

    if (!isInNested)
        $this.parents("." + container.clz).radmenu(index);

    else
        $this.radmenu(index);

    //cancelBubble(evt);         <<<<<<<<<<<<<<<< Remove this

};

And here is the result in in a JSFiddle: http://jsfiddle.net/7asLq/10/

Answer 2

For Dynamically injected elements, you should use delegate method. For more details refer to the API Documentation: http://api.jquery.com/delegate/

Lets assume there is an outer DIV to the original code with Id = "outerWrapper" .

So your handler should look like something like this:

$("#outerWrapper").delegate(".radial_div_item div .menulink","click",function(e){
    e.preventDefault();
    console.log('menu clicked');
    alert('now');
});