jquery - 拖动和克隆所有问题

Question

我有一个可拖动模块，附加了编辑/删除功能，效果很好。但是，当我拖动它并对其进行克隆并将其放入可放置区域时，克隆将失去其编辑/删除功能。按钮仍然存在，但不起作用。

必须有一种更简单的方法来做到这一点。

我真的需要知道我在这里做错了什么。

这是我的代码...

var xLabsConnect = {

jQuery : $,

settings : {
    columns : '.column',
    columnsNav : '.columnNav',
    widgetSelector: '.widget',
    handleSelector: '.widget-head',
    contentSelector: '.widget-content',
    widgetDefault : {
        movable: true,
        removable: true,
        collapsible: true,
        editable: true,
    },
    widgetIndividual : {
        intro : {
            movable: false,
            removable: false,
            collapsible: false,
            editable: false
        }
    }
},

init : function () {
    this.attachStylesheet('../css/dragstyles.css');
    this.addWidgetControls();
    this.makeSortable();
},

getWidgetSettings : function (id) {
    var $ = this.jQuery,
        settings = this.settings;
    return (id&&settings.widgetIndividual[id]) ? $.extend({},settings.widgetDefault,settings.widgetIndividual[id]) : settings.widgetDefault;
},

addWidgetControls : function () {
    var xLabsConnect = this,
        $ = this.jQuery,
        settings = this.settings;

    $(settings.widgetSelector, $(settings.columns)).each(function () {
        var thisWidgetSettings = xLabsConnect.getWidgetSettings(this.id);
        if (thisWidgetSettings.removable) {
            $('<a href="#" class="remove">CLOSE</a>').mousedown(function (e) {
                e.stopPropagation();   
            }).click(function () {
                if(confirm('This widget will be removed, ok?')) {
                    $(this).parents(settings.widgetSelector).animate({
                        opacity: 0   
                    },function () {
                        $(this).wrap('<div/>').parent().slideUp(function () {
                            $(this).remove();
                        });
                    });
                }
                return false;
            }).appendTo($(settings.handleSelector, this));
        }

        if (thisWidgetSettings.editable) {
            $('<a href="#" class="edit">EDIT</a>').mousedown(function (e) {
                e.stopPropagation();   
            }).toggle(function () {
                $(this).css({backgroundPosition: '-66px 0', width: '55px'})
                    .parents(settings.widgetSelector)
                        .find('.edit-box').show().find('input').focus();
                return false;
            },function () {
                $(this).css({backgroundPosition: '', width: ''})
                    .parents(settings.widgetSelector)
                        .find('.edit-box').hide();
                return false;
            }).appendTo($(settings.handleSelector,this));
            $('<div class="edit-box" style="display:none;"/>')
                .append('<ul><li class="item"><label>Change the title?</label><input value="' + $('h4',this).text() + '"/></li>')
                .insertAfter($(settings.handleSelector,this));
        }           

    });

    $('.edit-box').each(function () {
        $('input',this).keyup(function () {
            $(this).parents(settings.widgetSelector).find('h4').text( $(this).val().length>20 ? $(this).val().substr(0,20)+'...' : $(this).val() );
        });
        $('ul.colors li',this).click(function () {

            var colorStylePattern = /\bcolor-[\w]{1,}\b/,
                thisWidgetColorClass = $(this).parents(settings.widgetSelector).attr('class').match(colorStylePattern)
            if (thisWidgetColorClass) {
                $(this).parents(settings.widgetSelector)
                    .removeClass(thisWidgetColorClass[0])
                    .addClass($(this).attr('class').match(colorStylePattern)[0]);
            }
            return false;

        });
    });

    var activelist = $(".activemodules").sortable({
        revert: false,
        placeholder: 'widget-placeholder',
        forcePlaceholderSize: true,
        opacity: 0.7,
    });

    $(".allmodules li").draggable({
        connectToSortable: ".activemodules",
        helper: "clone",
        opacity: 0.7,
        revert: 300,
        delay: 100,
    });
},


attachStylesheet : function (href) {
    var $ = this.jQuery;
    return $('<link href="' + href + '" rel="stylesheet" type="text/css" />').appendTo('head');
},



};

xLabsConnect.init();

提前谢谢你们。

Answer 1

克隆时，您可以传递 bool 参数，指示何时复制附加到克隆元素的数据和事件。请参阅引用here .

作为替代方案，也许您应该尝试 live或delegate 。这些功能允许对动态添加的元素进行事件监听(例如克隆)。

例如，而不是

$('<a href="#" class="edit">EDIT</a>').mousedown(function (e) {
  [...]

这样做

$('<a href="#" class="edit">EDIT</a>').live('mousedown', function (e) {
  [...]

删除功能也是如此。