cant access element in dialog title

I can't seem to get a reference to the on click events of buttons in the titlebar but if they are in the regular content area of the dialog I can click them. Can anyone point me in the right direction to be able to register click events from the buttons in the title bar?

// Define the player details window dialog
        var dialog = $( ".graph-container" ).dialog({
          autoOpen: false,
          modal: true,
          show: {
            effect: "clip",
            duration: 1000
          },
          hide: {
            effect: "explode",
            duration: 2000,
            complete: function() { 
                console.log('complete');
            }
          },
          width: modalWindow.width,
          height: modalWindow.height,
          resizable: false,
          beforeClose: function(event, ui) { 
              console.log('before close function');
          },
          position: { 
                my: 'center',
                at: 'center',
                of: window
          }
        });     

        // Override the undocumented _title property to allow HTML in the title
        // More info: http://ift.tt/1E1tmi3
        dialog.data( "uiDialog" )._title = function(title) {
            title.html( this.options.title );
        };          
        dialog.dialog('option', 'title', '<span class="left">Stats for ' + player.PlayerName + ' - Last ' + $scope.gameFilter + ' games</span>' +
                '<span class="right"><div id="dateButtonDiv">' +
                    '<button class="dateButton">5</button>' + 
                    '<button class="dateButton">25</button>' +
                    '<button class="dateButton">100</button>' +
                '</div></span>');

        $( ".graph-container" ).dialog( "open" );

        $('.dateButton').click(function(){
            var btn = this;
            console.log('Date button clicked');
        });