获取动态元素以更改文字

Question

我的网页中有一个动态元素，当我点击图标时会出现：

<span class="elasticbar-item text-right text-baseline">
      <button class="button primary" data-next-button="">MY TEXT</button>
</span>

但我想用新文本更改来自服务器（我没有访问权限）的默认文本。

我之前尝试过的是：

var buttonIntervalCheck = setInterval(function () {
  var button = $("[data-next-button]");

  if(button.length === 1) {
    button.text("NEW TEXT");
    clearInterval(buttonIntervalCheck);
  }
}, 1000);

Google Chrome中的示例

第一个结果是我点击了我的图标。 第二个结果是当我按下按钮上的按钮（Ctrl + Shift + I）时。

我不明白究竟是如何运作的。 我怎么解决它？

Answer 1

尝试在您的控制台上运行此功能：

$("[data-next-button]").text("NEW TEXT");

如果它正常工作，那么你的时机错了。您可能在加载DOM之前调用button.text。尝试将代码包装在准备好的函数周围：

$(function() {
  var buttonIntervalCheck = setInterval(function () {
  var button = $("[data-next-button]");

  if(button.length === 1) {
    button.text("NEW TEXT");
    clearInterval(buttonIntervalCheck);
  }
}, 1000);
});

Answer 2

您无法使用jquery选择动态元素，请尝试使用js，如

document.querySelector("[data-next-button]")

Answer 3

在下面的示例中，有一个setTimeout()可以在5秒内动态地在HTML中添加button。然后，setInterval()更改button的文本并关闭间隔。一切都按预期工作。我在这里看不到任何错误。

＆＃13;

＆＃13;

var buttonIntervalCheck = setInterval(function () {
  var button = $("[data-next-button]");

  if(button.length === 1) {
    button.text("NEW TEXT");
    clearInterval(buttonIntervalCheck);
  }
}, 1000);

setTimeout(function(){
  $('#ss').html(`<span class="elasticbar-item text-right text-baseline">
      <button class="button primary" data-next-button="">MY TEXT</button>
</span>`);
}, 5000);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='ss'></div>

＆＃13;

＆＃13;

＆＃13;