function attachMenuBar() {
$('body').on('mouseover mouseout', '*:not(.printToolBar)', function (e) {
if (this === e.target) {
(e.type === 'mouseover' ? setMenuBox(e.target) : removeMenuBox(e.target));
}
});
}
function setMenuBox(obj) {
$(obj).wrap('<div class="toolBarWrapper" style="position:relative;"/>');
$(".toolBarWrapper").append($('.printToolBar'));
}
function removeMenuBox(obj) {
$(".toolBarWrapper").remove('.printToolBar');
$(obj).unwrap();
}
function createToolBar() {
var ul = $("<ul>").attr({
'class': "printToolBar",
style: "border: 1px solid #ff0000; position:absolute; top:0 ; right: 0;"
});
var li = $("<li>").attr({
'className': "printToolBarList"
}).text('Print');
var printLi = li.clone().attr({
id: "print"
}).on('click', function (e) {
console.log(this);
});
ul.append(printLi).appendTo("body");
};
attachMenuBar();
createToolBar();
I am implementing a menu bar for every HTML element, but I am facing an issue with detaching the event on the menu bar itself. This is causing some JavaScript errors. Is there any alternative approach to achieve the same functionality?