JQuery не хочет работать с созданным новым элементом
 

Я создаю новый элемент в боковую панель и затем хочу закрывать боковую панель, когда мышка уходит с этого нового элемента, но jQuery не видит мой новый элемент, функция ( mouseenter ) не работает, хотя должна работать.

Погуглил попытался использовать функцию on, но видимо я так правильно и не понял, как мне её использовать, в итоге так ничего и не показывает.

Создание элемента:

$("#sidebar-click").click(function(){
  if($('.his-mouse-hide','#hide-add').length == 0){
        $('#hide-add').append('<div class="his-mouse-hide"></div>');
        $('.his-mouse-hide').width( $('.group-side-context').width() + ($('.group-side-context').width() / 10) );
  };
});

Закрытие боковой панели:

$(".his-mouse-hide").mouseenter(function(){
  alert("Xyx");
  $(".his-mouse-hide").one("mouseleave", function(){
    alert("Pabotaet");
  });
});

И то, что я пытался сделать с on, но никак не получается:

$("body").on('mouseenter','.his-mouse-hide',function(event){
  alert("Xyx");
});

jQuery просто не реагирует на мой новый элемент, программирую в c#, так что понимаю логику js и jquery достаточно слабо, как же всё же заставить jquery увидеть мой новый элемент и работать с ним ?

Зачем дважды тема в разных причем не в нужном разделе.

А почему one("mouseleave"..., что после закрытия удаляется кнопка?
И делегировать нужно всегда ближайшему родителю, который есть на странице всегда.

Это будет $('.group-side-context').width() * 1.1

Во-первых я не понял к какой теме это отнести, решил, что модерация просто удалит пост в не правильной теме.
Во-вторых я знаю, что *1.1 даст тот же результат, я просто тестировал.
В-третьих это не кнопка, это блок.
.group-side-context - это блок всей левой боковой панели.
.his-mouse-hide - это блок который я создаю такого же размера только больше и в том же месте.

Родитель у них один - это #hide-add.

И вот когда я нажимаю кнопку открыть боковую панель, он её открывает и создаёт пустой div, который слегка больше этой боковой панели. Я хочу, чтобы когда я отводил мышку от этого нового элемента(.his-mouse-hide) то вся боковая панель убиралась.

Убирается и открывается она классом у #hide-add,
context-sidebar-active - открыт
context-sidebar - закрыт

По моей логике, примерно так должно выглядеть

$("#hide-add").on('mouseenter','.his-mouse-hide',function(event){
  $(this).on('mouseleave','.his-mouse-hide',function(){
    $(".group-side-context").parent().removeClass("context-sidebar-active").addClass("context-sidebar");
  });
});

Но я даже не знаю, зачем нужен( и нужен ли ) event внутри function, по идее когда наводишь на новый элемент, он ждёт когда ты уберёшь мышку и затем срабатывает переключение классов, как работают делегаты в js я не знаю, мне по сути нужно только этот маленький кусочек кода решить, как описать правильно, но с этим у меня проблемы по этому и пришёл на форум =)

Если открывалась/закрывалась, то зачем ее создавать, может проще показывать/скрывать уже имеющееся?

Метод .one() это установка одноразового обработчика события, то есть раз сработает и все. Поэтому не понятно чего вы творите.

Сделай небольшой тестовый пример, на нем можно будет показать "логику js и jquery"... ;)
Я убрал дубль...

Всё я разобрался, у меня всё правильно работает, просто один div блок находил на мой, по этому и не работал js