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

The following runs with latest WordPress and Woomerce. 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=".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>

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

The following runs with latest WordPress and Woomerce. 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./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!

• javascript
• jquery
• wordpress
• woomerce

• 1 live has been deprecated for a long while, what version of jQuery are you using? Please also create a minimal reproducible example. The easiest way of doing so would be to use Stack Snippets (icon looks like <> in the editor toolbar). – Heretic Monkey Commented Jul 15, 2020 at 12:00
• @HereticMonkey Thanks! I am using latest jQuery that es with latest WordPress. I needed live because the button is hidden at first and revealed later. I there a better option than live? – Mulli Commented Jul 15, 2020 at 12:02
• “I[s] there a better option than live? ” - that is stuff you can easily go and find out yourself, by reading the documentation for .live() - api.jquery./live – C3roe Commented Jul 15, 2020 at 12:06
• 1 “following html (just a fragment for readability)” - if you reduce stuff too much, that is not helpful either. Please provide a proper minimal reproducible example of the issue. – C3roe Commented Jul 15, 2020 at 12:08
• 1 That was actually the least important part of my ment. I was asking for a reproducible example, much like what was given in the answer you've received. – Heretic Monkey Commented Jul 15, 2020 at 12:30

3 Answers 3

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.

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./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>

I guess you are getting multiple objects for $('.ll-li-tabs .ui-state-active'). And attr will select first of them and return the value.

Please note that you are having ll-li-tabs & ui-state-active both classes on li so you should be using them without like $('.ll-li-tabs.ui-state-active').

If you want to get $('.ll-li-tabs.ui-state-active') with specific attribute you can use attribute selector []. In your case you can use like below.

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

In below example I've set first li without aria-controls attribute and second li with aria-controls. Please check result for $('.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./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>