Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 05.01.2019, 21:41
Профессор
Отправить личное сообщение для Sergey1986 Посмотреть профиль Найти все сообщения от Sergey1986
 
Регистрация: 28.02.2018
Сообщений: 172

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

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

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

и в html

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

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

через this все, только вот теперь при выборе элемента из этого меню....она вновь переоткрываеться...хм...
Ответить с цитированием
  #12 (permalink)  
Старый 05.01.2019, 22:07
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

А почему обработка щелчка по menu-open делегируется, он что добавляется динамически?
Ответить с цитированием
  #13 (permalink)  
Старый 05.01.2019, 23:29
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Sergey1986
через this все, только вот теперь при выборе элемента из этого меню....она вновь переоткрываеться
Все равно не понятно чего хочется. Во-первых почему все таки делегирование обработчика причем прапрадедушке. Во-вторых почему добавляется. Если строится некое меню, то его можно на чистом 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>

Последний раз редактировалось laimas, 05.01.2019 в 23:32.
Ответить с цитированием
  #14 (permalink)  
Старый 05.01.2019, 23:49
Профессор
Отправить личное сообщение для Sergey1986 Посмотреть профиль Найти все сообщения от Sergey1986
 
Регистрация: 28.02.2018
Сообщений: 172

$('body').on('click','#menu-open' --- "прапрадедушке, к примеру если таких 10ток таких же ссылок или элемнтов, кторые могут открыть менюшку (т.е. на перед мне не известно)...вот и прадедушке делегирую...
Ответить с цитированием
  #15 (permalink)  
Старый 05.01.2019, 23:58
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Sergey1986
к примеру если таких 10ток
Таких даже два не может быть, не говоря уже о более, id - это есть и должно быть уникальным значением. А менюшка менюшке рознь. К примеру, есть N строк, которые в атрибуте содержат как json значение, которое является контентом для контекстного меню. В этом случае оправдано добавление/удаление такого контента в раскрывающееся меню. Сам контейнер меню уже может быть на странице и добавляться/показываться у строки выбранной. В противном случае не понятно чего и зачем.
Ответить с цитированием
  #16 (permalink)  
Старый 06.01.2019, 00:02
Профессор
Отправить личное сообщение для Sergey1986 Посмотреть профиль Найти все сообщения от Sergey1986
 
Регистрация: 28.02.2018
Сообщений: 172

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

и js отработает
Ответить с цитированием
  #17 (permalink)  
Старый 06.01.2019, 00:05
Профессор
Отправить личное сообщение для Sergey1986 Посмотреть профиль Найти все сообщения от Sergey1986
 
Регистрация: 28.02.2018
Сообщений: 172

и вот почему еще дедушке делегируем...сервер отдает html без этой id = menu, она потом появляеться (сервер досылает...) когда пользователь начинает работать
Ответить с цитированием
  #18 (permalink)  
Старый 06.01.2019, 00:12
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Sergey1986
есть 5 сылок
Сообщение от Sergey1986
$('body').on('click','#zapusk'
Сообщение от Sergey1986
и js отработает
Чушь полнейшая - браузер знает, что 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>
Ответить с цитированием
  #19 (permalink)  
Старый 06.01.2019, 00:15
Профессор
Отправить личное сообщение для Sergey1986 Посмотреть профиль Найти все сообщения от Sergey1986
 
Регистрация: 28.02.2018
Сообщений: 172

Вы, все верно говорите, про id!
Ответить с цитированием
  #20 (permalink)  
Старый 06.01.2019, 00:16
Профессор
Отправить личное сообщение для Sergey1986 Посмотреть профиль Найти все сообщения от Sergey1986
 
Регистрация: 28.02.2018
Сообщений: 172

как тут так делать что бы код исполнялся...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Поместить html внутрь объекта koha345 Dojo toolkit 2 30.04.2016 15:24
при скроллинге блок исчезает avanesov89 Общие вопросы Javascript 0 19.03.2016 13:26
Ховер и появляющий блок Shuryga Элементы интерфейса 3 28.09.2015 14:39
Копирование блоков в блок maximus Events/DOM/Window 1 14.09.2013 19:40