Question

$('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");
};
createToolBar();

This is what I am trying to do set the menubar with every HTML element, but I am unable to detach the event on menubar it self, which is causing problem by throwing some JS error, is there any other way to achieve the same?

Answer 1

To remove the ‘hover’ behavior on the ul element, I think you need to update your first code line :

$('body').on('mouseover mouseout', '*:not(.printToolBar), *:not(ul)', function (e) {
     if (this === e.target) {
        (e.type === 'mouseover' ? setMenuBox(e.target) : removeMenuBox(e.target));
     }
});

This way you will attach mouseevent to all elements but ul and .printToolbar

EDIT :

To remove attachments of UL children :

$('body').on('mouseover mouseout', '*:not(ul.printToolBar), *:not(ul.printToolBar >    *)', function (e) {
    if (this === e.target) {
       (e.type === 'mouseover' ? setMenuBox(e.target) : removeMenuBox(e.target));
    }
});