javascript - 无法使用 jQuery 获取 .attr ('aria-controls' )

Question

问题是 jQuery 返回 undefined我不知道为什么...
以下使用最新的 WordPress 和 Woocommerce 运行。使用的 jQuery 是 WP 默认的。
我有以下 html(只是为了便于阅读的一个片段)，并且该按钮最初是隐藏的，稍后会显示出来。
远低于并由用户点击上面的“点击我”按钮激活以下js:

(function($) {
  $(document).on('click', '#llwoo-update-profile-field-button', function() {

    // $('#llwoo-update-profile-field-button').live('click', function() {
    let t = $('.ll-li-tabs .ui-state-active'); // returns OK
    console.log("Handler for .click() called. t=", t);
    let t2 = $('.ll-li-tabs .ui-state-active').attr('aria-controls'); // return undefined!
    console.log("Handler for .click() called. t2=", t2);
  });
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<ul>
  <li class="ll-li-tabs ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-2" aria-labelledby="ui-id-2" aria-selected="true" aria-expanded="true">
    <a href="#tabs-2" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-2">
      <div id="ll-box-TR" class="ll-box-s ll-box-TR">li with aria-controls</div>
    </a>
  </li>
</ul>
<div id="llwoo-update-profile-field" class="llwoo-update-profile-field">
  <button id="llwoo-update-profile-field-button" type="button">click me</button></div>

t有一个值，而 t2未定义且存在“aria-controls”。
知道问题出在哪里吗？我错过了什么？
编辑:我替换 live与 on - 同样的问题仍然存在...
谢谢!

Answer 1

如果要匹配只包含两个类的 div，则不应在 jquery 选择器中在它们之间添加空格

$('.ll-li-tabs .ui-state-active')

一定是

$('.ll-li-tabs.ui-state-active')

我更喜欢使用 id 而不是 class 来避免此类问题，或者使用一次使用的类并将其放入选择器而不使用任何其他类。