尽管数据属性名称匹配，为什么.data（）和.attr（）返回未定义？

Question

在单击div时，我要将data属性中的变量传递给JS文件。

我尝试过$(this).data('event')和$(this).attr('data-event')，但都返回未定义。

<div id="event{$event['id']}" data-event="{$event['id']}">
<span>{$event['name']}</span>
</div>

$('[id^="event"]').on('click', function(e) {
    console.log($(this).data('event'));
    console.log($(this).attr('data-event'));
});

//browser output
<div class="m-widget4 event-click" id="event2" data-event="2">
 <div class="m-widget4__item">
  <div class="m-widget4__ext">
   <span class="m-widget4__icon m--font-brand m--font-bold">
   Event:
   </span>
  </div>
  <div class="m-widget4__info">
    <button class="m-widget4__text event-click-text">
    Olelele OKsadno saodi.
    </button>
  </div>
 </div>
</div>

我期望在日志中输入一个字符串，但是每次都没有定义。

Answer 1

$('[data-event]').click(function(e) {
  console.log($(this).data('event'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="m-widget4 event-click" id="event2" data-event="2">
 <div class="m-widget4__item">
  <div class="m-widget4__ext">
   <span class="m-widget4__icon m--font-brand m--font-bold">
   Event:
   </span>
  </div>
  <div class="m-widget4__info">
    <button class="m-widget4__text event-click-text">
    Olelele OKsadno saodi.
    </button>
  </div>
 </div>
</div>

效果很好：)它也可以和[id^="event"]一起使用，我只是发现这样做更方便。

编辑：我唯一能想到的错误是您可能还有另一个以“事件”开头的id的元素，该元素被选为父元素。它可能没有任何数据事件属性，因此显示为未定义。您可能希望选择器尽可能具体，以排除这种情况。