jQuery .on() firing when addClass has been used

In the following code, I can't tell why my console prints 'hi' when I click on a button with the class 'edit-button' for the first time. The second time I'm expecting it to print the console because the 'update-now' class has been added to the button. Does anyone understand why this is? Thanks!

$(function() {
    $('.edit-button').on('click', function(e) {
      $( this ).addClass('update-now').html('Update');
    });
});



$(document).on('click', "div.update-now", function() {      
    console.log('hi');
});