How to insert an element into a selectable control

Question

Is there a "clean" way to insert an element into a jQuery UI Selectable control?

Let's say I have the following choice:

<div id="selectable"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div> 

I could manually insert a line, for example:

 $('<div>Item 4</div>').addClass('ui-selectee').appendTo($('#selectable')); 

While it visually looks right, are there any events that I need to enable? Is this a clean way to insert an item, or is there a better way?

Answer 1

There is no api for this. Therefore, I believe that your encoding is correct. You can also try calling .selectable( "refresh") after adding.

Answer 2

According to the API, you can also simply use the autoRefresh parameter (enabled by default) to expand the list of selectable elements when adding elements to the DOM element.

If you have a huge list of items, it is recommended that you set autoRefresh to false and call the update method manually.