Not able to resize Vertical Ruler again once resize stops

Question

I am using JQuery Resizable widget on the vertical Ruler as shown in the link below. Once, I start resize using the east handle and stop it. Now, I try to resize the ruler again and I find the resize handle not showing up. I checked the html div but the ui-resizable div is deleted. Any sort of help would be useful.

My JS Code:

createRuler();

$('.ruler').resizable({
  handles: "e",
  resize: function(event, ui) {
    $('.ruler').empty();
    createRuler();
  },
  stop: function(event, ui) {},
  start: function(event, ui) {}
});

Check here for complete code

Answer 1

This line breaks it:

 $('.ruler').empty();

I think what is happening, is that you are dumping the data (or reference - not sure exactly what the empty() method does in your application) each time you click. This is fine when you first instantiate it - but the next time you click it - you are running the same function again - this time with no data for the resize.

Try setting up some logic that trigger $('.ruler').empty(); ONLY on the first click of the ruler handle.