Присоединение обработчика событий к динамическим элементам

Question

Сначала у меня есть несколько виджетов, которые я могу перетащить, и они также можно сортировать.И у каждого виджета есть кнопка удаления.Я хотел бы добиться того, чтобы у одного из виджетов была кнопка добавления.Когда бы я ни нажимал кнопку добавления нового виджета, я хотел бы клонировать первый виджет, как он есть, и добавить в конец списка.Пока это работает.Я могу клонировать виджет, но я использую clone (true), который позволяет кнопке закрытия работать идеально для клонированной кнопки закрытия.Проблема в том, что я не могу перетаскивать клонированные элементы.Чего мне не хватает?

Заранее спасибо.

Спасибо за ваш ответ.Но у меня это не сработало.

Вот часть кода;

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

        $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');

Это один из готовых кодов, которые я нашел в интернете.

При первом просмотре в браузере я вижу 6 виджетов.Я хотел бы клонировать любой из них и добавить динамически.

спасибо

Answer 1

Вероятно, им не хватает подходящих обработчиков событий. Когда вы изначально связывали обработчики событий для виджетов, вы, вероятно, использовали mousedown() и т. Д. Для выбора виджетов. Однако это будет связывать только те виджеты, которые jQuery обнаружил при выполнении оператора.

Если вы хотите, чтобы динамически созданные объекты также были связаны, вам нужно использовать live() для привязки событий.

Так что вместо

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

У

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