3.  $(document).ready(function() {
4.             buildDiv(3, 3, 128, 128, 'smile_face.png');
5.           
6. 
   
7.         });
            
8. function buildDiv(x, y,width,height, img) {
9.             var ele = $(document.createElement('div'));
10.             ele.css('top', (x * 128) + 'px');
11.             ele.css('left', (y * 128) + 'px');
12.             ele.css('width', width + 'px');
13.             ele.css('height', height + 'px');
14.             ele.css('z-index', 0);
15.             ele.css('background-image', 'url(\'' + img + '\')');
16.             ele.css('position', 'absolute');
17.             $('.mapContainer').append(ele);
18. 
    
19.             ele = $(document.createElement('div'));
20.             ele.css('top', (x * 128) + 'px');
21.             ele.css('left', (y * 128) + 'px');
22.             ele.css('width', width + 'px');
23.             ele.css('height', height + 'px');
24.             ele.css('z-index', 5000);
25.             ele.css('position', 'absolute');
26.             ele.addClass('clickable');
27.             ele.attr('id', toStore(x, y));
28.             $('.mapContainer').append(ele);
29.        
30.         }
32.       function toStore(x, y) {
33.             return (x << 8) ^ y;
34.         }
35. 
    

I think have a selector which looks like this

2. $(".clickable").click(
3.             function() {
4.                   alert('CLICKED');
5.             });

The problem is when the dynamic DIV is added to the form, it shows up but is not clickable.  The event is never called.  When a div is added with the class clickable on page load, the event is triggered.

Im guessing there is some way to add an element to the clickable selector but I can not figure it out.  

Thank you.