Cannot get .attr('aria-controls') using jQuery

Question

The problem is that jQuery returns undefined and I have no clue why...

The following runs with latest WordPress and Woocommerce. jQuery used is the WP default.

I have the following html (just a fragment for readability) and the button is hidden at first and revealed later.

Much below and activated by the user click on the "click me" button above to activate the following 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 has a value while t2 is undefined and 'aria-controls' exists.

Any idea where the problem is? What am I missing?

EDIT: I replace live with on - Same problem remains...

Thanks!

Answer 1

if you want to match div that contains just both classes you shouldn't add space between them in jquery selector

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

must be

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

i prefer to use id rather than class for something like this to avoid the problems or use class used one time and put it to selector without any other class.

Answer 2

jquery doesn’t support live(). Use 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>