Получить значение атрибута данных при щелчке по элементу с помощью jquery?

У меня есть очень простой код. в основном мне нужно получить значение атрибута данных при нажатии на элемент.

Я использую следующий код:

$(document).on('click', ".MyLi", function (e) {
  var cont = $(this).attr('data-cont');
  alert(cont);
});

Это работает, НО с проблемой.

Если вы запустите следующий код в скрипте, вы увидите, что он покажет значение data-cont в alert(); но когда я нажимаю на ПОДМЕНЮ, он сначала показывает подменю data-cont в alert (), а затем показывает MY MENUdata-cont, который является его родителем!

$(document).on('click', ".MyLi", function (e) {
  var cont = $(this).attr('data-cont');
  alert(cont);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<li class="MyLi" data-cont="MY MENU ">
  <a><i></i>&nbsp;MY MENU</a>
  <ul>
    <li class="MyLi" data-cont="MY SUBMENU">
      <a><i></i>&nbsp;MY SUBMENU</a>
    </li>
  </ul>
</li>

Мне нужно только значение data-cont элемента, на котором щелкают!

Может кто-нибудь дайте мне знать, что я делаю не так?

0
0
34
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

То, что здесь происходит, называется всплыванием / распространением событий. event.stopPropagation() - это то, что вы ищете

Это предотвращает всплытие событий в верхние элементы или переход вниз к нижним элементам под тем же selector.MyLi в вашем случае.

Рад узнать больше о здесь.

$(document).on('click', ".MyLi", function(e){

  e.stopPropagation();  
  var cont = $(this).attr('data-cont');
  
  alert(cont);

  
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<li class="MyLi" data-cont="MY MENU ">
<a>
<i></i>&nbsp;
MY MENU 
</a>
<ul>
<li class="MyLi" data-cont="MY SUBMENU"><a>
<i></i>&nbsp;
MY SUBMENU</a></li>
</ul></li>

Хороший. это сделало это.

Rooz Far 11.04.2018 14:17

конечно Джордж. Придется ждать 7 минут.

Rooz Far 11.04.2018 14:21

Ответ Джорджа хорош, но вы должны знать: это обычное поведение.

(document).on('click', ".MyLi", function(e){ ... нацелен, как вы и просили, на все элементы класса .MyLi.

И вы дали тот же class в МЕНЮ и ПОДМЕНЮ. Таким образом, он возвращает как data-attribute.

Другие вопросы по теме