After append new tag, you have to bind the draggable() event again...
On Jan 28, 1:42 am, Mircea <i...@amsterdamsat.com> wrote:
> Hi
> I have a container div with some spans. I had set the spans to be
> dragable and I want to do a function that on click will append a new
> span to my container and make it also draggable.
>
> I manage to append the new span in #selectable container but it is not
> draggable.
>
> My code is:
>
> <script type="text/javascript">
> $(function() {
> $("span").draggable();});
>
> </script>
>
> <script type="text/javascript">
> $(document).ready(function(){
> $("#selectable").click(function(){
> $("#selectable").append("<span>The new span</span>");
> });
>
> });
>
> </script>
>
> and the markup is:
> <div id="selectable">
> <div class="ui-widget-content" style="width: 800px; height: 500px;
> background:#ccc;">
> <span class="text draggable">Item 1</span>
> <span class="text draggable">Item 2</span>
> <span class="text draggable">Item 3</span>
> <span class="text draggable">Item 4</span>
> <span class="text draggable">Item 5</span>
> <span class="text draggable">Item 6</span>
> <span class="clone">Clone</span>
> <p class="clone">a p replaced</p>
> </div>
> </div>
>
> Thank you.
