1

I have a jquery function that swaps a bootsrap dropdown to a dropup, if the distance from the element to the bottom of the window is smaller than the height of the dropdown menu. It works fine, until the DOM gets updated and something gets added to the bottom of the window (let's say a new section or some menu gets expanded). The new distance from the element doesn't get accounted. I tried delegation with the .on method to check if the DOM gets updated but that did not fix the issue.

$('.dropdown').on('click', function(){
  var elemDistanceToBottom = $(window).height() - $(this).offset().top;
  if($('.dropdown-menu').height()>elemDistanceToBottom ){
     $(this).closest(".dropdown-fix").addClass("dropup");
  }
});
Sined Strategy
  • 39
  • 1
  • 6
  • 1
    You're not delegating, if you use this form. You need to pass three parameters to use the event delegation – VLAZ Dec 02 '19 at 11:27
  • The widow.height is being changed and that is the main problem, it is not being detected – Sined Strategy Dec 02 '19 at 11:28
  • Check the dupe. To use event delegation, you have to select a *parent* element, then as the second parameter of `on` pass the selector you want to monitor. So, if you have a dynamically added `.child` and a `.parent`, you need to do `$(".parent").on("click", ".child", function() {})`. If you do `$(".child").on("click", function() {})` that will only bind the handler to the elements that exist at the time you make that call, it does not account for dynamically added `.child` elements. – VLAZ Dec 02 '19 at 11:34
  • As this question isn’t really about event delegation at all, this seems like a more appropriate dupe: https://stackoverflow.com/questions/3219758/detect-changes-in-the-dom – Lennholm Dec 02 '19 at 11:36

0 Answers0