title: jQuery on() click event handler not working
body: <p>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).</p>
  
  <p>When i do:</p>
  
  <pre><code>$('.menulink').on('click', function(e) {
      e.preventDefault();
      console.log('menu clicked');
      alert('now');
  });
  </code></pre>
  
  <p>within $(window).load then it works correctly on desktop. However if i use:</p>
  
  <pre><code>$(document).on('click', '.menulink', function(e) {
      e.preventDefault();
      console.log('menu clicked');
      alert('now');
  });
  </code></pre>
  
  <p>within $(document).ready then it never fires. FYI I'm using Jquery 1.11.1.</p>
  
  <p>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).</p>
  
  <p>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!</p>
  
  <p>Can anyone see what i'm doing wrong!! (please see 'UPDATE 2 AS REQUESTED' below which includes a fiddle showing the problem)</p>
  
  <p><strong>UPDATE AS REQUESTED:</strong></p>
  
  <p>I am using <a href="http://tikku.com/jquery-radmenu-plugin" rel="nofollow">http://tikku.com/jquery-radmenu-plugin</a> 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:</p>
  
  <pre><code>&lt;div id="radial_container" class="ui-radmenu-parent visible"&gt;
      &lt;ul style="display: none;" class="list"&gt;
          &lt;li class="item"&gt;&lt;div class="menuopt2"&gt;&lt;a class="menulink" href="/url2"&gt;&lt;img class="svghover" alt="OPT2" src="/img/pages/2.png"&gt;&lt;div class="menulabel"&gt;OPT2&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
          &lt;li class="item"&gt;&lt;div class="menuopt14"&gt;&lt;a class="menulink" href="/url14"&gt;&lt;img class="svghover" alt="OPT14" src="/img/pages/14.png"&gt;&lt;div class="menulabel"&gt;OPT14&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
          &lt;li class="item"&gt;&lt;div class="menuopt20"&gt;&lt;a class="menulink" href="/url20"&gt;&lt;img class="svghover currentsectionicon" alt="OPT20" src="/img/pages/20-ro.png"&gt;&lt;div class="menulabel"&gt;OPT20&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
          &lt;li class="item"&gt;&lt;div class="menuopt74"&gt;&lt;a class="menulink" href="/url74"&gt;&lt;img class="svghover" alt="OPT74" src="/img/pages/74.png"&gt;&lt;div class="menulabel"&gt;OPT74&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>After the plugin loads it generates the following markup:</p>
  
  <pre><code>&lt;div class="radial_div" style="position: relative;"&gt;
      &lt;div style="position: absolute; left: 596.277px; top: 93.8734px;" class="radial_div_item"&gt;&lt;div class="menuopt2"&gt;&lt;a class="menulink" href="/url2"&gt;&lt;img class="svghover" alt="OPT2" src="/img/pages/2.png"&gt;&lt;div class="menulabel"&gt;OPT2&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div style="position: absolute; left: 874.839px; top: 11.8205px;" class="radial_div_item"&gt;&lt;div class="menuopt14"&gt;&lt;a class="menulink" href="/url14"&gt;&lt;img class="svghover" alt="OPT14" src="/img/pages/14.png"&gt;&lt;div class="menulabel"&gt;OPT14&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div style="position: absolute; left: 1165.16px; top: 9.64253px;" class="radial_div_item"&gt;&lt;div class="menuopt20"&gt;&lt;a class="menulink" href="/url20"&gt;&lt;img class="svghover currentsectionicon" alt="OPT20" src="/img/pages/20-ro.png"&gt;&lt;div class="menulabel"&gt;OPT20&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div style="position: absolute; left: 1443.72px; top: 91.8418px;" class="radial_div_item"&gt;&lt;div class="menuopt74"&gt;&lt;a class="menulink" href="/url74"&gt;&lt;img class="svghover" alt="OPT74" src="/img/pages/74.png"&gt;&lt;div class="menulabel"&gt;OPT74&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>UPDATE 2 AS REQUESTED:</strong></p>
  
  <p>I have created a massively simplified fiddle just showing the menu and associated links. If you visit <a href="http://jsfiddle.net/7asLq/2/" rel="nofollow">http://jsfiddle.net/7asLq/2/</a> 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?</p>
  
  <p>Thanks so much,</p>
  
  <p>Dave</p>