无法使用 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 来避免这些问题，或者使用曾经使用过的 class 并将其放入选择器而不使用任何其他 class。

Answer 2

jquery 不支持live()。使用on()。

$(document).ready(function() {
        $('#llwoo-update-profile-field-button').on('click', function() {
            let t = $('.ll-li-tabs');
            console.log( "Handler for .click() called. t=", t );
            let t2 = $('.ll-li-tabs').attr('aria-controls');
            console.log( "Handler for .click() called. t2=", t2 );
        }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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"></div></a>
</li>
<div id="llwoo-update-profile-field" class="llwoo-update-profile-field">
   <button id="llwoo-update-profile-field-button" type="button">click me</button></div>

Answer 3

我猜你会为$('.ll-li-tabs .ui-state-active') 获得多个objects。 attr 将选择其中的第一个并返回值。

请注意，您在li 上同时拥有ll-li-tabs 和ui-state-active 两个类，因此您应该在没有 的情况下使用它们，例如$('.ll-li-tabs.ui-state-active')。

如果您想获得带有特定attribute 的$('.ll-li-tabs.ui-state-active')，您可以使用attribute selector []。在你的情况下，你可以像下面这样使用。

$('.ll-li-tabs.ui-state-active[aria-controls]')

在下面的示例中，我设置了第一个 li 不带 aria-controls attribute 和第二个 li 带 aria-controls。请检查$('.ll-li-tabs.ui-state-active').attr('aria-controls');和$('.ll-li-tabs.ui-state-active[aria-controls]').attr('aria-controls');的结果

(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').attr('aria-controls'); // return undefined!
    console.log("Handler for .click() called. t=", t);
    let t2 = $('.ll-li-tabs.ui-state-active[aria-controls]').attr('aria-controls'); // return tabs-2!
    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-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 1 without aria-controls</div>
    </a>
  </li>
  <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 2 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>