Working code won't execute after .load() but will execute other code?

Question

Could someone help me understand why this won't work? My button doesn't work after .load().

For context, my HTML is just a div (#box) with a scrollbar and two buttons, one to refresh (#load) and one to scroll bot (#scroll)

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

function Ref() {
      $('#load').click(function() {
        $('#box').load('test.php #box', function(r, status){
          if(status == "success"){
            $('#scroll').click(function() {
              $('#box').scrollTop($('#box')[0].scrollHeight);
            });
          }
          else{
            console.log("Error");
          }
        });
      });
    }

The tags are correct and my .load() function works but the code after that just stops working.

However, this does work:

function Ref() {
      $('#load').click(function() {
        $('#box').load('test.php #box', function(r, status){
          if(status == "success"){
            console.log("Success");
          }
          else{
            console.log("Error");
          }
        });
      });
    }

On .load(), a success message is received in the log implying to me that it DOES load successfully, however once I put in my own scroll code it doesn't work and I don't receive any errors.

I've tried to debug it with console.log() but I didn't receive anything useful and I'm still new with jQuery so I don't get what's going on with my original code because it functions correctly outside of .load() and documentations tell me this should work as intended as a callback function.