0

I used .load() function to cut my pages in different parts, like header, menu, footer ...

But I realize that HTML injected with .load() isn't compatible with my jquery functions.

There is a great exemple :

I have a header.html that I load on my main page :

 <div class="row justify-content-end">
    <div class="col-sm-4">
        <nav class="header">
            <ul>
                <li><a href="" target=_blank>Télécharger mon CV</a></li>
                <li>hello@floran.me</li>
                <li><a href="#menu" class="openMenu"><i class="icon icon-sort-bold icon-32"></i></a></li>
            </ul>
        </nav>
    </div>
</div>

On my script.js, I call a page named menu.html by clicking on the burger menu, and that was working before I decided to cut the header into a different page.

$( document ).ready(function() {
    
    var windowWidth = $(window).width();
    var DemiWindow = windowWidth / 2;
    
    // Appels includes
    $('#main-menu').load("includes/menu.html");
    $('.sticky-top').load("includes/header.html");
    
    function openMenu(){
        $('#main-menu').animate({left: 0}, 500, function(){});
        $('.main-content').animate({marginLeft: -DemiWindow}, 1000, function(){
            $('.main-content').css('margin-left', 'auto');
            $(document).on('keydown', function(event) {
                if (event.key == "Escape") {
                $('#main-menu').animate({left: windowWidth}, 500, function(){});
                }
            });
        });
    }
    function closeMenu(){
        $('#main-menu').animate({left: windowWidth}, 500, function(){});
        console.log(windowWidth);
    }
    
    $('#main-menu').css('left', windowWidth);
    
    $(window).resize(function() {
        windowWidth = $(window).width();
        DemiWindow = windowWidth / 2;
        $('#main-menu').css('left', windowWidth);
    });
    
    $('.openMenu').click(openMenu);
    
    $('.closeMenu').click(closeMenu);
    
    
});

I didn't read something about using jquery functions on injected HTML code, do you have a tip to keep it working ?

Thank you!

Floran
  • 11
  • 5
  • It seems like you either need to use callbacks from the async `load()` calls, or delegated event handlers, or possibly both. It's not clear what the exact issue is from your description of the issue or the code provided – Rory McCrossan Jun 21 '21 at 08:31
  • There shouldn't be a "late-load" issue *with the code provided*. You don't appear to call `openMenu()` (in the provided code). You haven't included `.main-content` (in the provided code). If `.main-content` is late-loaded (loaded after openMenu() called) then it would have the animate/css applied. You could load the "framework" of the menu (main-menu/main-content) in the main page then the content *inside* that. – freedomn-m Jun 21 '21 at 08:36
  • *something about using jquery on injected HTML code* - this is only for *event binding*. Jquery only works on what's there at the time it runs, so if you add some html after your code has run, it won't be affected by it. So for `$("#newitem").click(...` if newitem isn't there, it doesn't get the event. This is where event delegation comes in, see here for more info: https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – freedomn-m Jun 21 '21 at 08:38
  • @freedomn-m I understand what you mean, but in my case, the click action that open the menu is written after the .load(), so it should work, right ? – Floran Jun 21 '21 at 16:53
  • Hence my first comment "There shouldn't be a "late-load" issue with the code *provided*.". I was addressing your fears regarding "injected HTML code". – freedomn-m Jun 21 '21 at 17:01
  • I'm not sure to understand your explanation. I putted the entire jquery code on the topic if you want to take a look. Right now, I have the burger icon to trigger on the index.html, and the `#main-menu` too, then, the content is inside the menu.html. In the script file, I first load the menu.html with `load()`, then defining what is the `openmenu()` function, then condition triggering it with `click()` at the end of the file. – Floran Jun 21 '21 at 17:24

1 Answers1

0

So just found the problem by reading comments and this topic.

So, functions like .click aren't working for elements which were not into the DOM on document loading, even if the function is placed after their load on the js code. So I had to replace :

$('.openMenu').click(openMenu);
$('.closeMenu').click(closeMenu);

by

$(document).on('click', '.openMenu', openMenu);
$(document).on('click', '.closeMenu', closeMenu);

and this code is now working for every dynamic element added after DOM loading.

Floran
  • 11
  • 5