javascript - Unsure on why .load() complete event isn't working

Question

I'm unsure on why this isn't working:

$(document).ready(function() {
      setInterval(RefreshDiv, 2000);
    })

    function RefreshDiv(){
      $('#box').load('messages.php #box', function() {
        $('#box').on('load', function() {
          $('#box').scroll(0, 50);
        });
      });
    }

The tags are correct and the .load() part works every two seconds but I don't understand why my complete event to scroll down 50px isn't working?

I've also tried another method to scroll:

var log = document.querySelector('#box');
log.scrollTop = log.scrollHeight - log.clientHeight;

but this also doesn't execute on load

Edit #1

jQuery($ => {
      setInterval(RefreshDiv, 2000);
    })

    function RefreshDiv() {
      $('#box').load('messages.php #box', () => {
        $('#box').scrollTop(50);
      });
    }

Answer 1

The load event only fires on certain elements such as img and the window object. As such I presume #box is not one of them.

You don't actually need the load event handler anyway as the callback itself runs when the load() method completes its request. Try this:

jQuery($ => {
  setInterval(RefreshDiv, 2000);
})

function RefreshDiv() {
  $('#box').load('messages.php #box', () => {
    $('#box').scrollTop(5000);
  });
}

It's also worth noting that sending AJAX requests every 2 seconds is not ideal, as it will not scale as you have more concurrent visitors to your site, and can lead to server performance problems. There's likely to be a much better alternative, depending on what it is you're doing.