Question

我有按钮，点击时会创建另一个按钮。

$('#button')
.click(function (eventClick, posX, posY) {
    var htmlData = '<div id="btn' + $.count + '" class="draggable ui-widget-content ui-draggable" ' + 'data-page="' + $.page + '" ';
    if (posX != null && posY != null) {
        htmlData += 'style="left:' + Math.abs(posX - 439) + 'px; top:' + Math.abs(posY - 124) + 'px;""';
    }

    htmlData += '><button id="editable' + $.count + '" style="width:100%; height:100%">Button</button><a href="#" class="delete" style="z-index:999"></a></div>';

    $('.demo').append(htmlData);
    $('.draggable').draggable({
        containment: "#workspace",
        scroll: false,
        cancel: false,

    })
        .resizable({
            containment: "#workspace"
        })
        .click(function () {
            if ($(this).is('.ui-draggable-dragging')) {
                return;
            }
            $(this).draggable("option", "disabled", true);
            $(this).attr('contenteditable', 'true');
        })
        .blur(function () {
            $(this).draggable('option', 'disabled', false);
            $(this).attr('contenteditable', 'false');
        });
    $('a.delete').on('click', function (e) {
        e.preventDefault();
        btnID = $(this).closest('.draggable')[0].id;
        //alert('Now deleting "'+objID+'"');
        $('#' + btnID + '').remove();
    });

    $.count++;
});

当单击创建按钮时，此javascript将触发，现在这个嵌套在div中的新按钮具有可拖动，可调整大小，可删除的属性，并且内容应该是可编辑的。现在我的问题出现在我正在编辑文本时，当我完全删除它的内容时，整个button标记被删除。我刚刚离开，我认为是div标签。我似乎无法找到问题所在。

Answer 1

我觉得你在div上设置了contentEditable属性，因为它有'draggable'类。这意味着DIV内部的一切都是公平的游戏，包括按钮。如果您希望按钮的文本是可编辑的，则应该在按钮上设置contentEditable属性。

按钮可拖动，同时满足

1 个答案: