Selector $(body) works but break the code (reference error) while $("body") shows no error but dont work

I have a JS function that I need to be called on window resize. The only way I found to get this working is by using:

    $(body).on('resize', function(){
        myFunction();
    });

With this, myFunction() is executed on window resize. The problem is that I get a reference error (body is not defined), so the rest of my JS isn't executed properly.

I tried different selectors: $("body"), $("document.body"), $(window), $(document),... With them I get no reference error, but the function is not executed.

Here's what looks like ( minimal view ) my html:

<html>
    <head> 
        <script src="jquery.js"></script>   
    </head>
    <body>
        [ Alot of things ...]
        <script src="main.js"></script>
    </body>
</html>

So, jQuery is included in my head section, while my JS is included before closing body tag.

Now this is what looks like my main.js file:

myFunction(){
    alert("Hello world");
}

$(body).on('resize', function(){
    myFunction();
});

$(document).ready(function(){
    myFunction();
}

Function works properly on page load ( with $(document).ready ) but I need it to run on each page resize. I searched a lot to solve my problem, but I'm stuck. I apologize if the answer is trivial. I'm kind of a noob with JS and DOM elements selectors.

Edit with some more infos: The function in question is used to set multiple div to an equal height. You can found it here Equal Height divs with jQuery. My div group are rows of skelJS grid system.

So the initial problem was that when i was resizing my window, divs where not resized to fit the responsive font-size, so I get an overflow. Obviously I tried to call that function on window/body resize, but I can't get it to work EXCEPT if I use $(body) selector, which gives me an reference error, but then the overflow problem disappear and function properly runs on resize.. It's really strange. I tried all of your solutions, nothing seems to work.

Solution

You should be attaching the resize to the window, not to the document.body.

(function() {
    function resizeFnc() {
        console.log("resized called");
    }

    $(window).on("resize", resizeFnc); //calls it on resize
    $(resizeFnc); //calls it on document ready

}());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

The reason why $(body) fails is there is no variable "body" declared. The reasn why $("body") and $(document.body) fail is the event is not triggered on the body so it is not called.

And with the code you linked to.

function equalHeight(group) {
    console.log("I was called");
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}
 
$(function(){
    equalHeight($(".EqHeightDiv"));
});

$(window).on("resize", function(){
    console.log("resized called");
    equalHeight($(".EqHeightDiv"));
});

.EqHeightDiv { width: 30% ;box-sizing: border-box; display: inline-block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff</div>
<div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff<br />Here is some stuff</div>
<div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff<br />Here is some stu<br />Here is some stuff</div>

Now what is broken is the script you are using. Resize is called, it just is not setting the new max height. So as stated window resize is being triggered, the problem was somewhere else.

So how do we fix this?

var timer;
function equalHeight(group) {
  
    if (timer) window.clearTimeout(timer); //so this code is not called on every single resize
    timer = window.setTimeout( function () {
        var tallest = 0;
        group.height("");  //reset the heights
        group.each(function() {
            thisHeight = $(this).height();
            if(thisHeight > tallest) {
                tallest = thisHeight;
            }
        });
        group.height(tallest);
    }, 10);  
}
 
$(function(){
    equalHeight($(".EqHeightDiv"));
});

$(window).on("resize", function(){
    equalHeight($(".EqHeightDiv"));
});

.EqHeightDiv { width: 30% ;box-sizing: border-box; display: inline-block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff</div>
<div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff<br />Here is some stuff</div>
<div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff<br />Here is some stu<br />Here is some stuff</div>