0

I'm trying to fix an issue on the mobile navigation of this page: http://tinyurl.com/kq9xs6h

The tags are dynamically created in a JS function:

mobile_advanced      = menu.clone().attr({id:"mobile-advanced", "class":""}),

Which results in generating this HTML line:

<ul class="" id="mobile-advanced" style="position: absolute;">

The following code is working when using the browser console (so when the html has been generated):

 jQuery('#mobile-advanced a').on('click', function() {
        jQuery('body').removeClass('show_mobile_menu');
        jQuery('body').removeClass('show_mobile_meta');
        jQuery('body').css({'height':'auto'});
 });

But when I insert it in my JS file, the event's handler is not understood.

Where should I put this piece of code or how do I need to modify it so the handler is taken into account?

Digital Chic
  • 1
  • You can use the parent of the 'mobile-advanced' element, or just use `document` to delegate the click handler: `$(document).on('click', '#mobile-advanced a', function() { //your code }); – bencripps Sep 11 '14 at 00:44
  • What version of jQuery are you running? – DeFeNdog Sep 11 '14 at 00:48
  • `.clone(true)` will clone elements and also clone events attached to them. – 1252748 Sep 11 '14 at 01:11
  • where's menu assigned? Any errors that you could share with us? – DeFeNdog Sep 12 '14 at 01:22
  • Thanks we've used this answer as hint and it worked http://stackoverflow.com/questions/15090942/jquery-on-method-not-working-on-dynamic-content/15090957#15090957 – Digital Chic Sep 12 '14 at 02:31

1 Answers1

0

What if you wrapped your code in doc ready?

jQuery( document ).ready(function() {

    jQuery('#mobile-advanced').on( "click", "a", function() {
        jQuery('body').removeClass('show_mobile_menu');
        jQuery('body').removeClass('show_mobile_meta');
        jQuery('body').css({'height':'auto'});
    });

}
DeFeNdog
  • 1,156
  • 1
  • 12
  • 25