Question

我有以下代码非常简单。基本上我需要在单击元素时获取数据属性的值。

我正在使用以下代码：

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

这可以解决问题。

如果您在小提琴中运行以下代码，您会看到它会在data-cont中显示alert()值;但是当我点击 SUB MENU 时，它会先显示警告（）中的子菜单data-cont，然后显示MY MENU data-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的值！

有人可以让我知道我做错了吗？

Answer 1

这里发生的事情叫做冒泡/传播事件。您正在寻找event.stopPropagation()

这可以阻止事件冒泡到顶部元素，或者在您的情况下向下遍历同一selector .MyLi下的较低元素。

Rad更多关于here。

$(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>

Answer 2

乔治的答案很好，但只是让你知道：这是一种常规行为。

正如您所问，

(document).on('click', ".MyLi", function(e){ ...个目标是.MyLi类的所有元素。

你给了MENU和SUBMENU同样的class。因此它返回data-attribute。

使用jQuery单击元素时获取data属性的值？

2 个答案: