Whenever I click on a button, it generates another button dynamically.
$('#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++;
});
This piece of JavaScript is executed when the create button is clicked. The new button created within a div has properties such as being draggable, resizable, and deletable, with editable content. However, an issue arises while editing the text inside the button – when all the content is erased, only the div tags remain, without the button tag. Identifying the root cause of this problem has proven to be challenging.