Resizable: options stop event vs resizestop event?

Resizable: options stop event vs resizestop event?

So I'm trying to do the following:

  1. Create new div
  2. Make div draggable and resizable
  3. Add new div to container
  4. Trigger resizable "stop" event to set some values that would be normally set when resizing

I'm using something like this code:

  1. var resizableOptions = {
  2.       handles: "n,e,s,w,se,sw,ne,nw",
  3.       containment: 'parent',
  4.       stop: function(ev, ui) {
  5.             console.log('resizing stopped');
  6.             ui.element.data('mywidth', ui.size.width);
  7.       }
  8. };
  9. var $newDiv = $('<div id="mydiv"></div>');
  10. $newDiv
  11.       .draggable(draggableOptions)
  12.       .resizable(resizableOptions)
  13.       .appendTo('#container')
  14.       .trigger('resizestop');
(Just assume that draggableOptions is also defined)

What happens here is that resizestop is not fired at all. If I try $('#mydiv').trigger('resizestop') in Firebug it doesn't fire either. However, if I bind the stop event like this:
  1. $newDiv
  2.       .draggable(draggableOptions)
  3.       .resizable(resizableOptions) //stop function removed from resizableOptions
  4.       .on('resizestop', function(ev, ui) { //do same stuff as previous code })
  5.       .appendTo('#container')
  6.       .trigger('resizestop');
      Then "resizestop" event can be fired programmatically, but it complains that ui is not defined, which would suggest that there is a difference to the "stop" event and "resizestop" events.

Can anyone help me figure out what is happening here and why there is a difference between defining the event in options vs as a separate event handler?