CODEWITHSUNDEEP
jquery
eozzy
eozzy

Reputation: 68650

Function can't find dynamically added elements

I have this "getter" function that returns an element:

var getElements = function(selector) {
    return $(selector);
  },
  button = getElements('button');

console.log(button.length);

setTimeout(function() {
  $('#banner-message').append('<button>Another Button</button>');
  console.log(button.length); // expected: '2'; result: '1';
}, 3000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="banner-message">
  <p>Hello World</p>
  <button>Buttton</button>
</div>

How do I make the getter function recognise dynamically added elements?

Upvotes: 1

Views: 4325

Answers (7)

BlueWater86
BlueWater86

Reputation: 1817

Perform the requery. If you want a real "getter" as your question and comments suggest, use a getter. It seems like this is what you are trying to achieve.

class x {
  get button() {
    return $("button")
  }
}

const instance = new x

console.log(instance.button.length);

setTimeout(function() {
  $('#banner-message').append('<button>Another Button</button>');
  //after append call again
  console.log("after append--", instance.button.length); // expected: '2'; result: '1';
}, 3000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="banner-message">
  <p>Hello World</p>
  <button>Buttton</button>
</div>

Upvotes: 2

Lomash Bhattarai
Lomash Bhattarai

Reputation: 11

the button variable is not updated after you have dynamically added the button. Simply,replace 

console.log(button.length);

with 

console.log(getElements('button').length)

Upvotes: 1

Ijas Ameenudeen
Ijas Ameenudeen

Reputation: 9259

Make the length dynamic using Functions Getter

var getElements = function(selector) {
    return {
      get length() {
        return $(selector).length
      }
    };
  },
  button = getElements('button');

console.log(button.length);

setTimeout(function() {
  $('#banner-message').append('<button>Another Button</button>');
  console.log(button.length); // expected: '2'; result: '1';
}, 3000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="banner-message">
  <p>Hello World</p>
  <button>Buttton</button>
</div>

Upvotes: 0

Chris Happy
Chris Happy

Reputation: 7295

As mentioned by @PrriyanshiSrivastava, "variable[s] holds old static data". You have to update them. . Here's one way of doing it without calling $('button') again.

var $buttons = $('button');

console.log($buttons.length);

setTimeout(function() {
  var $newBut = $('<button>Another Button</button>'); // Create new button
  $('#banner-message').append($newBut); // Append it
  $buttons.push($newBut); // Add it to the array without researching the DOM
  console.log($buttons.length); // expected: '2'; result: '1';
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="banner-message">
  <p>Hello World</p>
  <button>Buttton</button>
</div>

Upvotes: 0

Pablo
Pablo

Reputation: 6048

You can consider the button variable as a cached DOM query result. You must re-query the DOM to get new elements that match the search criteria. In your case, you can always get up to date number of buttons by using getElements('button').length.

Upvotes: 0

troyw1636
troyw1636

Reputation: 348

You've set the variable 'button' while there is only 1 matching element, and are then checking the length of that same variable again after adding another element. You should refresh that variable after appending your new element.

var getElements = function(selector) {
    return $(selector);
  },
  button = getElements('button');

console.log(button.length);

setTimeout(function() {
  $('#banner-message').append('<button>Another Button</button>');
  // refresh the variable
  button = getElements('button');
  console.log(button.length); // expected: '2'; result: '1';
}, 3000);

Upvotes: 0

p u
p u

Reputation: 1445

As its dynamic...you need to refresh your function too

var getElements = function(selector) {
    return $(selector);
  },
  button = getElements('button');

console.log("intial length---", button.length);

setTimeout(function() {
  $('#banner-message').append('<button>Another Button</button>');
  //after append call again
  button = getElements('button');
  console.log("after append--", button.length); // expected: '2'; result: '1';
}, 3000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="banner-message">
  <p>Hello World</p>
  <button>Buttton</button>
</div>

Upvotes: 1

Related Questions