Пытаюсь создать типа контекстного меню на js + jqery

на элемент вешаю слушателя

$('body').on('click','#menu-open', function(event){....

и в html

<div id = menu-open>
<p>открыть меню</p>
</div>

рядом c <p>, положить новый div в котором менюшка (всплывающая и относительно этого блока)

через this все, только вот теперь при выборе элемента из этого меню....она вновь переоткрываеться...хм...

А почему обработка щелчка по menu-open делегируется, он что добавляется динамически?

Все равно не понятно чего хочется. Во-первых почему все таки делегирование обработчика причем прапрадедушке. Во-вторых почему добавляется. Если строится некое меню, то его можно на чистом css сделать.

Допустим, что так надо и это уже есть на странице, тогда:

<div id="menu"><p>Open</p></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$('#menu').click(function(){
    $('<ul style="display:none;"><li>111111</li><li>222222</li></ul>') 
        .appendTo(this) //добавили контент
        .slideDown().click(function(e) { //показали его и определили выбор в нем
            e.stopPropagation(); //запретили всплытие события
            console.log($(e.target).text()); //что-то выполнили по выбору
            $(this).slideUp(function() { //спрятали контент
                $(this).remove() //удалили контент, правда это будет оправдано если контент различен 
            })
        })
});
</script>

$('body').on('click','#menu-open' --- "прапрадедушке, к примеру если таких 10ток таких же ссылок или элемнтов, кторые могут открыть менюшку (т.е. на перед мне не известно)...вот и прадедушке делегирую...

Таких даже два не может быть, не говоря уже о более, id - это есть и должно быть уникальным значением. А менюшка менюшке рознь. К примеру, есть N строк, которые в атрибуте содержат как json значение, которое является контентом для контекстного меню. В этом случае оправдано добавление/удаление такого контента в раскрывающееся меню. Сам контейнер меню уже может быть на странице и добавляться/показываться у строки выбранной. В противном случае не понятно чего и зачем.

понимаю что одинаковых id быть не моежт документе html
но к примеру есть 5 сылок которые при нажатии на них должны запустить одну и ту же функцию...можно же сделать
$('body').on('click','#zapusk', function(event){....

и js отработает

и вот почему еще дедушке делегируем...сервер отдает html без этой id = menu, она потом появляеться (сервер досылает...) когда пользователь начинает работать

Чушь полнейшая - браузер знает, что id, это уникальный идентификатор и найдя на странице первый таковой назначит ему обработчик, искать еще таковые он не станет, для него это лишено смысла, именно по этому выбор по id несколько быстрее производится.

Попробуйте щелкнуть по второй ссылке, получится?

<a id="a1" href="#">Link1</a>
<a id="a1" href="#">Link2</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$('#a1').click(function(e) {
    e.preventDefault();
    alert($(this).text())
})
</script>

Вы, все верно говорите, про id!

как тут так делать что бы код исполнялся...:)