Attaching event handler to dynamic elements

First I have some widgets which I can drag drop and they are also sortable. And every widget has a delete button. What I would like to achieve is that, one of the widget has a add button. When ever I click that add new widget button, I would like to clone first widget as it is and add at the bottom of the list. So far it works. I am able to clone the widget but I use clone(true) which allows the close button to function perfect for cloned close button. The problem is that I cannot drag and drop the cloned items. What am I missing?

Thank you in advance.

Thank you for your reply. But It didnt work for me.

Here is a part of the code;

 makeSortable : function () {
    var iNettuts = this,
        $ = this.jQuery,
        settings = this.settings,

    开发者_Python百科    $sortableItems = (function () {
            var notSortable = '';
            $(settings.widgetSelector,$(settings.columns)).each(function (i) {
                if (!iNettuts.getWidgetSettings(this.id).movable) {
                    if(!this.id) {
                        this.id = 'widget-no-id-' + i;  
                    }
                    notSortable += '#' + this.id + ',';

                }



            });

            var result = $('> li:not(' + notSortable + ')', settings.columns);


            return result;
        })();

    $sortableItems.find(settings.handleSelector).css({
        cursor: 'move'
    }).mousedown(function (e) {

        $sortableItems.css({width:''});
        $(this).parent().css({
            width: $(this).parent().width() + 'px'
        });

    }).mouseup(function () {
        if(!$(this).parent().hasClass('dragging')) {
            $(this).parent().css({width:''});



        } else {
            $(settings.columns).sortable('disable');
        }
    });

    $(settings.columns).sortable({
        items: $sortableItems,
        connectWith: $(settings.columns),
        handle: settings.handleSelector,
        placeholder: 'widget-placeholder',
        forcePlaceholderSize: true,
        revert: 300,
        delay: 100,
        opacity: 0.8,
        containment: 'document',
        start: function (e,ui) {
            $(ui.helper).addClass('dragging'); 



        },
        stop: function (e,ui) {
            $(ui.item).css({width:''}).removeClass('dragging');
           $(settings.columns).sortable('enable');

This is one of ready made code which I found on the internet.

When first time I view it on the browser I can see 6 widgets. I would like to clone any of them and add dynamically.

thank you

They are likely missing the proper event handlers. When you bound the event handlers for the widgets initially, you probably used a mousedown(), etc on a selection of the widgets. However this will only bind those widgets that jQuery found when the statement was executed.

If you want dynamically created objects to also be bound, you need to use live() to bind the events.

So instead of

$('.widget').mousedown(function(){...});`

Do

$('.widget').live("mousedown", function(){...});