jQuery on('resize') not working as expected

Question

I wrote some jQuery to dynamically position an element. While it works on load, it doesn't work when the window is resized.

The code I have:

  $(document).ready(function() {
      var offset = $("#kDropdown").offset();
      //$(".hidden-dropdown").css('position', 'absolute')
      //$(".hidden-dropdown").css('left', offset.left);
      $(document).on('resize', function () {
        $(".hidden-dropdown").css('position', 'absolute')
        $(".hidden-dropdown").css('left', offset.left);
      }).trigger('resize');
    });


      <div class="hidden-dropdown hide">
        <ul>
          <li><a href="#">Item One</a></li>
          <hr />
          <li><a href="#">Item Two</a></li>
          <hr />
          <li><a href="#">Item Three</a></li>
        </ul>
      </div>

Any ideas?

Answer 1

Usually, the one resized is the window , hence:

$(window).on("resize", function() {
    console.log("yay");
});

You can attach it with the resize method directly:

$(window).resize(function() {
    console.log("direct yay");
});

They are both the same.