基于jQuery的拖拽式邮件模板构建器：拖拽后文本编辑失效求助

我仔细看了你的拖拽邮件模板构建器代码，发现导致拖拽元素无法编辑文本的主要原因是动态创建元素的事件绑定失效，还有文本编辑功能的初始化逻辑没有正确适配克隆出来的新元素。下面是具体的问题分析和修复方案：

问题分析 #

1. 你的textedit插件在初始化时，直接给当时页面中存在的.clickedit元素绑定了focusout、keyup事件，同时给它的前一个元素绑定了click事件。但拖拽克隆出来的元素是动态生成的，这些事件不会自动绑定到新元素上。
2. 克隆元素时，.clickedit处于隐藏状态，初始化逻辑没有针对动态元素做适配，导致点击触发编辑的逻辑无法生效。

修复方案 #

我们需要调整事件绑定方式（改用事件委托），并修改文本编辑的初始化逻辑，让它能正确作用于动态添加的元素：

修改后的完整JS代码 #

$(function() {
    $('.clickedit').hide();

    $("#dragme").draggable({
        helper: 'clone',
        cursor: 'move',
        tolerance: 'fit'
    });

    var x = null;
    $("#droppable").droppable({
        drop: function(e, ui) {
            x = ui.helper.clone();
            x.draggable({
                helper: 'original',
                containment: '#droppable',
                tolerance: 'fit'
            });

            // 移除原有的可调整大小手柄，避免重复渲染
            x.find('.ui-resizable-handle').remove();
            x.resizable();
            x.appendTo('#droppable');
            ui.helper.remove();

            // 针对当前克隆的元素初始化文本编辑功能
            initTextEdit(x);
        }
    });

    // 抽离文本编辑初始化函数，适配动态生成的元素
    function initTextEdit($element) {
        var defaultText = 'Text Edit';
        
        // 给当前元素内的文本标签绑定点击切换事件
        $element.find('.clickedit').prev().on('click', function() {
            $(this).hide();
            $(this).next().show().focus();
        });

        // 用事件委托处理输入框的焦点丢失和回车确认事件
        $(document).on('focusout', $element.find('.clickedit'), function(e) {
            var input = $(e.target),
                label = input.prev();
            label.text(input.val() === '' ? defaultText : input.val());
            input.hide();
            label.show();
        }).on('keyup', $element.find('.clickedit'), function(e) {
            if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
                var input = $(e.target),
                    label = input.prev();
                label.text(input.val() === '' ? defaultText : input.val());
                input.hide();
                label.show();
                return false;
            }
            return true;
        });
    }
});

关键改动说明 #

• 事件委托替代直接绑定：把输入框的focusout和keyup事件绑定到document上，通过指定目标元素选择器，确保动态生成的.clickedit元素也能触发事件。
• 独立初始化函数：将文本编辑的逻辑做成独立函数initTextEdit，每次克隆新元素后，针对当前元素单独初始化，避免全局绑定的冲突和失效问题。
• 调整执行顺序：先把克隆元素添加到容器中，再初始化编辑功能，确保元素已经存在于DOM树中，事件能正确关联到元素上。

这样修改后，拖拽到右侧容器的元素就能正常触发文本编辑功能了——点击文本标签会切换到输入框，输入完成后点击外部区域或者按下回车，就能保存内容并切换回标签显示。

内容的提问来源于stack exchange，提问作者swaroop komma