Creating an event that triggers a second event

Question

I'm trying to create a jQuery event that triggers a second event. The first event is clicking on the emoji id which refers to an image. The second is a mousemove event which moves the image around the page. The third event stops this event when the mouse click happens again anywhere in the body of the page and places the image at that absolute position. I was able to get the second and the third events to work but I can't get the first event to work with the second. Here is what I have so far for my jQuery:

var mouseTracker  = function(event) {
console.log(event.pageX, event.pageY, !!event.which)
$('#emoji').css('top', event.pageY);
$('#emoji').css('bottom', event.pageY);
$('#emoji').css('left', event.pageX);
$('#emoji').css('right', event.pageX);
}

var begin = function() {
$('body').on('mousemove', mouseTracker);
$('body').css('cursor', 'none');
}

var stop = function() {
$('body').off('mousemove', mouseTracker);
$('#emoji').css('postion', 'absolute')
$('body').css('cursor', 'default');
}

$('#emoji').on('click', begin);
$('body').on('click', stop);`

Answer 1

Initialize the event from within the first event call.

$('#emoji').on('click', function() {
    begin();
    $('body').on('click', stop);
});