代码之家 › 专栏 › 技术社区 › eozzy

函数找不到动态添加的元素

jquery

eozzy · 技术社区 · 7 年前

我有一个“getter”函数,它返回一个元素:

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>

如何使getter函数识别动态添加的元素?

7 回复 | 直到 7 年前

BlueWater86 7 年前

到目前为止,所有的答案都是正确的。执行重新查询。如果你想像你的问题和评论所暗示的那样,找到一个真正的“有成就感的人”,那就使用 getter . 看起来这就是你想要达到的目标。

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>

p u 7 年前

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>

Ijas Ameenudeen 7 年前

console.log(button.length);

具有

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

troyw1636 7 年前

在只有1个匹配元素时设置了变量“button”,然后在添加另一个元素后再次检查同一变量的长度。在添加新元素后,应该刷新该变量。

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);

Pablo 7 年前

你可以考虑 button 变量作为缓存的DOM查询结果。必须重新查询DOM以获取与搜索条件匹配的新元素。在您的情况下,您可以使用 getElements('button').length .

Chris Happy Roddy 7 年前

正如@prriyansisrivastava所提到的,“变量[s]保存旧的静态数据”。你必须更新它们。这里有一种不用打电话的方法 $('button') 再一次

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>

Ijas Ameenudeen 7 年前

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>