JQuery element created and added to sortable connected list not selectable to apply events to

I'm not sure if I've gone about this the right way, but its what I have ended up with. I have a master list on the LHS of the page which contains list items that can be dropped onto a number of droppable div boxes, inside the droppable div there is a ul that is sortable and connected to all the other uls on the page, so that once an item is dropped from the master list it is able to be dragged and dropped into the other uls so as to modify it's position in the connected uls.

The problem I am having is that the newly created li when dropped from the master list is not able to be selectable via jquery selectors and have events applied in a way which would be expected, I can apply events by using the id of the new item but this loses it's ability to belong to an event group, if you will, i.e context menu does not hide as it's created for each element rather than a group of elements.

I have created a fiddle page here that demonstrates a simplified set up and the issue.

http://jsfiddle.net/mJLZu/54/

I think it may be a bug or an anomaly with jquery.

removing the ul.sortable code allows the newly dynamically created li to be selectable as a group using jquer开发者_JAVA百科y.

I'm stumped. any help would be appreciated :)

---

Your selectors are wrong. Instead of using this:

$('ul[class=listItem_drop] li').dblclick( function () 

Use this:

$('ul.listItem_drop li').dblclick( function () 

The difference here is that your first selector is looking for an element with that exact value for the class attribute, and no other classes. The far, far more common way to test for a class, the .classname selector, is what you want here.

But you ask, what other classes? Well, when you work with jQueryUI, it adds classes to keep track of some internal things. This is evident in the inspector:

(Updated fiddle.)